일반적으로 하나의 컴포넌트에 하나 또는 여러 개의 useEffect 훅을 사용하는 것이 좋습니까?

일반적으로 하나의 컴포넌트에 하나 또는 여러 개의 useEffect 훅을 사용하는 것이 좋습니까?

닫았습니다. 이 질문은의견 기반의현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?이 게시물을 편집하여 사실과 인용문으로 답변할 수 있도록 질문을 업데이트하십시오.

1년 전에 문을 닫았어요

커뮤니티는 1년 전에 이 질문을 재개할지 여부를 검토한 후 종료했습니다.

원래 종료 이유가 해결되지 않았습니다.

이 질문을 개선하다

리액션 컴포넌트에 적용해야 할 부작용이 몇 가지 있는데 어떻게 정리해야 하는지 알고 싶습니다.

• 1회 사용
• 또는 여러 사용효과

퍼포먼스와 아키텍처는 어느 쪽이 좋습니까?

따라야 하는 패턴은 사용 사례에 따라 달라집니다.

첫째: 초기 마운트 중에 이벤트 리스너를 추가하고 마운트 해제 시 해당 리스너를 정리해야 하는 경우와 특정 리스너를 정리한 후 프롭 변경 시 다시 추가해야 하는 상황이 발생할 수 있습니다.

이 경우 두 가지 다른 방법으로useEffect퍼포먼스상의 메리트를 얻을 뿐만 아니라 관련 논리도 함께 유지하는 것이 좋습니다.

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

두 번째: 정의된 집합에서 상태 또는 소품이 변경되었을 때 API 호출 또는 기타 부작용을 트리거해야 합니다.이 경우 싱글은useEffect관련 의존성을 감시하는 것이 더 나을 것이다.

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

세 번째: 여러 가지 변경에 대해 별도의 부작용이 필요합니다.이러한 경우, 관련 부작용을 다른 것으로 분리한다.useEffects

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])

reactjs.org에서 제안하는 바와 같이 여러 가지 효과를 사용하여 문제를 구분해야 합니다.

use Effect를 여러 개 사용해도 문제 없습니다.

내 설정 중 하나는 다음과 같습니다.

/*
 * Backend tags list have changed add the changes if needed
 */
useEffect(() => {
    setTagsList(setTagsAdded);
}, [setTagsAdded]);

/*
 * Backend files have changed add the changes if needed
 */
useEffect(() => {
    for (let i = 0; i < changedFilesMeta.length; i += 1) {
        // Is the list item value changed
        if (changedFilesMeta[i].id === currentEditableFile.id) {
            unstable_batchedUpdates(() => {
                setTags(changedFilesMeta[i].tags ? changedFilesMeta[i].tags : []);
            });
        }
    }
}, [changedFilesMeta]);

/*
 * Reset when user select new files using the filepicker
 */
useEffect(() => {
    if (setNewFiles.length > 0) {
        unstable_batchedUpdates(() => {
            setCurrentFile(null);
            setDescription('');
            setTitle('');
            setTags([]);
        });
    }
}, [setNewFiles]);

/*
 * User selecet to edit a file, change to that file
 */
useEffect(() => {
    // When user select a file to edit it
    if (currentEditableFile && currentEditableFile !== theCurrentFile) {
        setCurrentFile(currentEditableFile);
        unstable_batchedUpdates(() => {
            setDescription(currentEditableFile.description);
            setTitle(currentEditableFile.title);
            setTags(currentEditableFile.tags);
        });
    }
}, [currentEditableFile]);

언급URL : https://stackoverflow.com/questions/54002792/in-general-is-it-better-to-use-one-or-many-useeffect-hooks-in-a-single-component