React 이슈 정리

1. exhaustive-deps

always full 'props' object for dependency

https://github.com/facebook/react/issues/16265

 

아래와 같이 작성했는데도 불구하고 props를 디펜던시로 지정하라는 eslint 오류가 vscode에서 발생한다.

useEffect(()=>{
    console.log('Running useEffect...');
    console.log(typeof(props.myProp));
},[props.myProp]);

 

2. useState

lazy initialization

https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

 

lazy initialization 한 인자에 대해서는 후속 렌더링 시 무시된다. 무거운 연산이 초기화 과정에 필요할 때 사용하자.

const [count, setCount] = useState(
  someExpensiveComputation(num),
)

const [count, setCount] = useState(() =>
  someExpensiveComputation(num)
)

 

3. useEffect

ref.current in clean up function

https://github.com/facebook/react/issues/15841

 

두 useEffect의 clean up function의 차이를 보자. ref 가 참조하고 있는 component가 clean up 함수가 실행되는 시점에 변경될 수 있으므로 복사본을 통해 clean up 하자.

useEffect(() => {
    log("mount 1 ", ref.current);
    return () => setTimeout(() => log("unmount 1 ", ref.current), 0);
}, []);

useEffect(() => {
    const element = ref.current;

    log("mount 2 ", element);
    return () => setTimeout(() => log("unmount 2 ", element), 0);
}, []);

https://codesandbox.io/s/react-useeffect-useref-warning-407fj

The first useEffect ignores the hooks warning and on unmount, it logs null.
The second useEffect does a variable copy

4. performance

useEffect dependency

https://dmitripavlutin.com/react-useeffect-infinite-loop/

 

충격적인 데모를 보자. 무한루프가 돌고 있다. ref나 dependency로 value를 추가해서 무한루프를 없앨 수 있다.

아래 예제는 매번 새로운 객체가 생성되어서 문제가 발생한다.

React Profiler

https://imkev.dev/react-reconciliation-performance-measures

Learning the React reconciliation algorithm with performance measures

5. Suspense

New Suspence SSR Architecture in React 18

https://github.com/reactwg/react-18/discussions/37

New Suspense SSR Architecture in React 18 · Discussion #37 · reactwg/react-18

Github Links

performance

https://github.com/welldone-software/why-did-you-render

GitHub - welldone-software/why-did-you-render: why-did-you-render by Welldone Software monkey patches React to notify you about

참고 사이트

https://medium.com/@dan_abramov

Dan Abramov – Medium

https://blog.saeloun.com/category/react/

react