너 뭐하고있어?

후크를 사용하여 React를 작성할 때 기능 구성 요소의 많은 속성이 메모되지 않는 것을 보았습니다. 제 생각에는 이것은 거의 항상 아니오입니다.

이것은 React가 작동하는 방식 때문에 일반적으로 좋은 방법이 아닙니다. 메모화되지 않은 모든 것은 다시 렌더링할 때마다 재정의됩니다. 따라서 일반적으로 내 규칙은 기능 구성 요소에 정의된 모든 것을 메모화하고 나머지는 구성 요소에서 전역 범위로 이동하는 것입니다.

이렇게 하면 정의한 것의 성능이 빨라질 뿐만 아니라 이 작업을 수행하지 않으면 복합적인 효과가 나타납니다. 메모하는 것을 잊은 것이 다른 속성에 의존하는 경우(useMemo 또는 useCallback의 종속성 배열을 의미), 해당 속성은 렌더링할 때마다 재정의됩니다.

전역적으로 정의된 변수는 다시 렌더링될 때 재정의되지 않으므로 재정의를 일으킬 염려 없이 사용할 수 있습니다.

뭐라고?

다음은 개인 프로젝트의 좋은 이전 예입니다(가져오기만큼 정의된/정의되지 않은 것은 무시).

const { Title } = Typography;

const UserScreen = () => {
  const db = firebaseApp.firestore();
  const { user, logout } = useContext(AuthContext);

  const onSubmit =
    async (newUserProperties) => {
      return await db
        .collection(DB.COLLECTIONS.USERS)
        .doc(user.uid)
        .update(newUserProperties);
    }

  return (...);
};

이 경우 모든 렌더링에서 firebaseApp.firestore() 작업이 호출됩니다. 재미 없어. 그런 다음 종속성 배열에 db가 있는 useCallback에서 onSubmit 함수를 던졌더라도 모든 렌더링에서 재정의됩니다. 따라서 거의 올바르게 수행한 것에 대한 크레딧조차 얻지 못합니다!

증명해

다음은 내 요점을 보여주는 코드 샌드박스입니다. https://codesandbox.io/s/relaxed-pasteur-7spqq?file=/src/App.js

Max Frajer에 Unsplash의 사진