React - hook flow

훅의 순서

App render start -> useState -> App render end -> useEffect

App 내 Child 컴포넌트 있을 시

const root = document.getElementById("root");

const Child = () => {
  console.log("        Child render Start");
  const [text, setText] = React.useState(() => {
    console.log("            Child useState");
    return "";
  });

  React.useEffect(() => {
    console.log("            Child useEffect - no deps");
  });
  React.useEffect(() => {
    console.log("            Child useEffect - []");
  }, []);
  React.useEffect(() => {
    console.log("            Child useEffect - [text]");
  }, [text]);

  function handleChange(event) {
    setText(event.target.value);
  }

  const element = (
    <>
    <input onChange={handleChange} />
<p>{text}</p>
</>
);
console.log("        Child render End");
return element;
};

const App = () => {
  console.log("----------------------------------------");
  console.log("App render Start");
  const [show, setShow] = React.useState(true);
  console.log("    App useState");
  function handleClick() {
    setShow((prev) => !prev);
  }
  React.useEffect(() => {
    console.log("    App useEffect - no deps");
  });
  React.useEffect(() => {
    console.log("    App useEffect - []");
  }, []);
  React.useEffect(() => {
    console.log("    App useEffect - [show]");
  }, [show]);

  console.log("App render End");
  return (
    <>
    <button onClick={handleClick}>Search</button>
{show ? <Child /> : null}
  </>
 );
};

ReactDOM.render(<App />, root);

위와 같이 코드를 작성했을 때 실행 순서는 아래와 같다.

Cleanup

컴포넌트가 업데이트될 때 useEffect clean up -> useEffect 순서로 실행된다.
처음엔 cleanup이 실행되지 않는다. 한 번이라도 useEffect가 등록이 되어있었으면 cleanup 하고 useEffect 업데이트 된 내용을 반영한다.

const root = document.getElementById("root");

const Child = () => {
  console.log("        Child render Start");
  const [text, setText] = React.useState(() => {
    console.log("            Child useState");
    return "";
  });

  React.useEffect(() => {
    console.log("            Child useEffect - no deps");
    return () => {
      console.log("            Child useEffect [Cleanup] - no deps");
    }
  });
  React.useEffect(() => {
    console.log("            Child useEffect - []");
    return () => {
      console.log("            Child useEffect [Cleanup] - []");
    }
  }, []);
  React.useEffect(() => {
    console.log("            Child useEffect - [text]");
    return () => {
      console.log("            Child useEffect [Cleanup] - [text]");
    }
  }, [text]);

  function handleChange(event) {
    setText(event.target.value);
  }

  const element = (
    <>
    <input onChange={handleChange} />
<p>{text}</p>
</>
);
console.log("        Child render End");
return element;
};

const App = () => {
  console.log("----------------------------------------");
  console.log("App render Start");
  const [show, setShow] = React.useState(true);
  console.log("    App useState");
  function handleClick() {
    setShow((prev) => !prev);
  }
  React.useEffect(() => {
    console.log("    App useEffect - no deps");
    return () => {
      console.log("    App useEffect [Cleanup] - no deps");
    };
  });
  React.useEffect(() => {
    console.log("    App useEffect - []");
    return () => {
      console.log("    App useEffect [Cleanup] - []");
    };
  }, []);
  React.useEffect(() => {
    console.log("    App useEffect - [show]");
    return () => {
      console.log("    App useEffect [Cleanup] - [show]");
    };
  }, [show]);

  console.log("App render End");
  return (
    <>
    <button onClick={handleClick}>Search</button>
{show ? <Child /> : null}
  </>
 );
};

ReactDOM.render(<App />, root);

Child 컴포넌트가 생성될 때

Child 컴포넌트가 삭제될 때