"setState"로 useContext 반응

Question

나는 최근에 useContext Hook과 함께 Context React Api를 사용하기 시작했습니다. 상태 변수 즉, const someState = useState (state, setState)가있을 때 일부 개발자는 공급자 값에 setSate를 직접 전달한 다음 하위 구성 요소에서 호출하는 것을 관찰했습니다. 그게 좋은 습관인가요?

컨텍스트를 사용하지 않는 경우 하위 구성 요소의 setState에 "액세스"하는 처리기를 만들어야합니다. 나는 여전히 핸들러 함수를 사용하고 있으며 그것들을 공급자 값에 전달하여 자식의 컨텍스트에서 가져옵니다.

컨텍스트에서 setState를 전달하는 것이 좋은 방법입니까? 일반적으로 setState를 구성 요소에 직접 전달할 수 없기 때문에 여전히 의심이 있습니다. 성능에 차이가 있거나 고려해야 할 다른 단점이 있습니까?

감사합니다.

Answer 1

내가 올바르게 이해했다면 한 가지 방식으로 상태가 부모 구성 요소에서 설정되고 다른 방식으로 상태가 자식 구성 요소에서 설정된다는 차이점이 있습니다. 때때로 사람들은 상태를 변경하는 루프 렌더링을 피하기 위해 그렇게합니다. 단점은 없지만 핸들러 함수를 사용하는 것이 일반적인 방법입니다.

Answer 2

편집 : 사실 내가 틀렸다고 생각하지만 확실하지 않습니다. 내 답변은 상태가있는 자신의 공급자를 작성하는 경우에 유효합니다. setter를 제공하는 기본 공급자를 사용하는 경우 Amel의 답변에 동의합니다.

---

나는 개인적으로 그것을하지 않을 것이다. 그러나 그것은 더 많은 의견이다. 그러나 항상 그렇듯이 달성하려는 목표에 따라 거의 다릅니다.

이를 수행하는 긍정적 인 측면은 useState에 의해 제공된 상태 설정 기가 항상 각 리 렌더에 대해 동일하게 유지된다는 것입니다. 사용자 지정 값을 전달하는 경우 useContext를 사용하여 변경을 수신하는 모든 구성 요소가 다시 렌더링되므로 너무 자주 변경되지 않도록해야합니다.

나는 여전히 상태를 설정하기 위해 콜백과 함께 사용자 정의 객체 (예 : 불필요한 rerender를 피하기 위해 useMemo에서 오는)를 전달하는 것을 선호합니다. 앞으로 더 많은 것을 제공하려면 확장하는 것이 더 쉽습니다.

다음과 같은 것 (매우 단순한 예, 당연히 이와 같이 말이 안되는 것은 이해를위한 것입니다) :

function MyProvider({children}) {
   const [state, setState] = useState(0);
   const provided = useMemo(() => ({
       value: state,
       setValue: (value) => setState(value)
   }, [value]);
   return <MyContext.Provider value={provided}>{children}</MyContext.Provider>;
}

컨텍스트가 사용되는 모든 곳에서 코드를 변경하지 않고 확장하는 것이 더 쉬울 것입니다. 그러나 나는 여전히 당신이 달성하고 싶은 것이 있다면 세터 만 전달하는 것이 특별한 나쁘지 않다고 생각합니다.