여러 번 호출되는 UseEffect

여러 번 호출되는 UseEffect

내 생각에는 말이지…useEffect렌더 후에 한 번만 호출되지만 여러 번 실행되며 예상한 순서가 아닙니다.

fetch가 진행 중일 때 msg '데이터 로드'가 될 것으로 예상했으며, fetch가 완료되면 제목 필드를 렌더링하고 ".."끝났어..." 한 번이면 끝이야.

흐름을 판별하기 위해 두 지점에 ALERT와 콘솔로그를 추가했더니 경고와 콘솔로그가 여러 번 다른 순서로 표시됩니다.이 코드를 실행해서 동작을 확인해 주세요.두 번째 인수 배열을 null로 유지하여 한 번만 실행하도록 했지만 도움이 되지 않습니다.

respect Render가 화면상의 디스플레이를 의미하는지 명확히 해주시겠습니까?LOAD는 어떤 단계를 의미합니까?전시가 언제 끝나나요?

코드는 다음과 같습니다.

import React, { useEffect, useState } from "react";
//import "./App.css";

function DemoFetchZ() {
  let data = { title: "Waiting for Data" };
  const [todo, setTodo] = useState(data);
  const [isData, setData] = useState(false);
  const [isFetching, setFetching] = useState(false);

  useEffect(() => { // called after the first render
    async function fetchData() {
      setFetching(true);
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/todos/1"
      );
      console.log("response = ", response);
      let data = await response.json();
      setTodo(data); //updt state
        setFetching(false);
        setData(true)
      console.log("Data = ", data);
    }
    fetchData();
  }, []); //[isData] null value will execute once only?

  if (isFetching) {
      console.log("data loading ......")
      alert ("data loading")
      return (<div>...Data Loading.....</div>);
  }

  return (
    <div>
           - Fetch
          <br /> {alert("..DONE...")}
      <span>Title: {todo.title}</span>
    </div>
  );
}

export default DemoFetchZ;

당신의.useEffect렌더링 사이클당 1회만 실행되지만 여러 상태 갱신이 있습니다.useEffect재충돌의 원인이 됩니다.그 때문에 많은 경보가 울립니다.

코드 데모를 참조하고 console.logs 및 코멘트를 참조합니다.

또한 useEffect는

• 빈 배열 종속성을 제공하면 useEffect가 한 번 실행됩니다.
• 어느 정도의 의존성을 중시하는 경우(예:[name]useEffect는 이름 상태/프로포트가 변경되었을 때 실행됩니다.
• 종속성 배열을 통과하지 못한 경우 useEffect는 재렌더마다 실행됩니다.

리렌더 시 여기를 읽다

이렇게 리팩터링합니다.

import React, { useEffect, useState } from "react";
//import "./App.css";

const DemoFetchZ = () => {
  const [todo, setTodo] = useState({});
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = () => {
    setLoading(true);
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((data) => {
        setTodo(data);
        setLoading(false);
      })
      .catch((error) => {
        console.log(error);
        setLoading(false);
      });
  };

  return (
    <>
      {loading ? (
        <div>...Data Loading.....</div>
      ) : (
        <div>
          - Fetch
          <br />
          <span>Title: {todo ? todo.title : "no Title Found"}</span>
        </div>
      )}
    </>
  );
};

export default DemoFetchZ;

장래의 독자를 위해서.

React 18은 Strict Mode에 새로운 개발 전용 체크를 도입합니다.이 새 검사는 구성 요소가 처음 마운트될 때마다 모든 구성 요소를 자동으로 마운트 해제하고 다시 마운트하여 두 번째 마운트의 이전 상태를 복원합니다.

이 경우 useEffect 콜백은 초기 렌더에 대해 두 번 실행됩니다.상태 변경 후 컴포넌트는 두 번 렌더링되지만 효과는 한 번 실행됩니다.

자세한 내용은 이 링크를 참조하십시오.

Create React App을 사용하여 새로운 프로젝트를 작성했거나 React 버전 18로 업데이트한 경우 개발 모드에서 useEffect 훅이 두 번 호출되는 것을 알 수 있습니다.Create React App을 사용했거나 React 버전 18로 업그레이드한 경우입니다.이 기사에서는 이상한 동작을 하는 React 18의 Strict Mode의 useEffect 훅에 대해 알아보겠습니다.useEffect 훅의 표준 동작은 2022년 3월에 React 18이 도입되었을 때 변경되었습니다.React 18로 업데이트한 후 응용 프로그램이 이상하게 동작하는 경우, 이는 단순히 useEffect 훅의 원래 동작이 변경되어 효과가 한 번이 아니라 두 번 실행되었기 때문입니다.

useEffect 후크를 다음과 같이 사용한 경우:

useEffect(() => {
  console.log("First call on mount..");

  return () => console.log("Cleanup..");
}, []);

콘솔에 대한 출력은 다음과 같습니다.

First call on mount..
Cleanup..
First call on mount..

첫 번째 마운트에서만 호출해야 하는 useEffect 후크는 두 번 호출됩니다.

데이터를 두 번 가져오지 않도록 useEffect 후크를 사용하여 데이터를 가져와야 할 경우 어떻게 해야 합니까?이 동작에 대한 간단한 해결책 중 하나는 strict 모드를 디세블로 하는 것입니다.src/index.js 파일을 열고 StrictMode 상위 컴포넌트를 삭제합니다.

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

언급URL : https://stackoverflow.com/questions/62631053/useeffect-being-called-multiple-times