https://github.com/coryhouse/reactjsconsulting/issues/77
reactjsconsulting.com의 설립자 Cory House의 트위터 타래 번역
- 가능한 한 state를 로컬로 관리할 것: state는 사용하는 컴포넌트에서 선언
- 렌더하지 않는 데이터는 ref로 관리
- context 사용 최소화
- 변경이 잦은 데이터는 context에 넣지 말 것
- 변경 시기에 따라 context 분리
- context provider 사용 최소화
- 비용이 큰 연산은
useMemo로 최적화 React.memo로 불필요한 렌더 줄이기- 변경이 잦은 부분은 새로운 컴포넌트로 만들기
- 복잡한 controlled 폼을 여러 컴포넌트로 나누기
- 비용이 큰 연산을 포함하는 폼에 uncontrolled 컴포넌트 사용
- 자식 컴포넌트에 전달하는 콜백함수를
useCallback으로 감싸기 useState대신useReducer를 이용한 dispatch 사용 고려React.lazy로 번들 split- 자주 사용될 컴포넌트를 prefetch
- Streamline HTTP requests - fetch only necessary data ?
- named imports 사용 자제해 번들 크기 줄이기(tree-shaking을 지원하는 경우는 크게 상관 없을 듯)
- HTTP requests를 캐싱(react-query, swr, Apollo 등)
- 되도록 기본 HTML input 사용