react hook life cycle

https://github.com/Wavez/react-hooks-lifecycle

https://github.com/donavon/hook-flow

useEffect

 

import { useEffect, useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("후", count);
    return () => console.log("전", count);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>ffff</button>
      {count}
    </div>
  );
};

export default App;

에서는 다음과 같이 clear 함수에서 업데이트 되기 직전 count를 계산하고, 업데이트 후에 콜백에서 업데이트 직후의 count를 계산한다.