React useState, useEffect 체인 렌더링 문제

Question

회사에서 리액트 코드를 작성하는데 useState를 너무 많이 써서 불필요한 렌더링을 너무 많이 발생시킨다고 피드백을 받았습니다. 제 딴에는 useState들의 순서를 보장하면서 플로우를 만들기 위해서 아래 예시처럼 코드를 작성했던건데,일반적인 경우에서 이러한 useState useEffect 체인이 나쁜건가요? 피드백은 불필요한 렌더링을 줄이기 위해서 가능하면 useMemo나 useRef를 이용하라였습니다. &#43; 렌더링이 일어날때 DOM이 업데이트 되진 않는 코드입니다. 단순히 컴포넌트의 state들이 바뀌는 사이클을 n회 있는 코드 입니다.const [option1, setOption1] &#61; useState(false) const [option2, setOption2] &#61; useState(false) const [option3, setOption3] &#61; useState(false) const [value, setValue] &#61; useState() useEffect(() &#61;> { setOption1(true) },[]) useEffect(() &#61;> { if(!option1) return setOption2(true) },[option1]) useEffect(() &#61;> { if(!option2) return setOption3(true) },[option2]) useEffect(() &#61;> { if(!option3) return setValue('some value') },[option3])

나니야 · Answer

사실, 써야될이유가 있다면 써도 되죠.단순 저 코드로 판단하긴 힘들것같아요.실제로 리렌더링이 일어날만한 페이지냐 아니냐에 따라서, 저는 뭘해도 상관없다고 봅니다.애초에 리랜더링이 안일어나는 페이지인데 굳~?이?라는 주의 ㅋㅋㅋ 저 option1,2,3들이 promise 리턴한다면 async 처리로 해도 될것같고요.저 코드만으로는 아이디어가 안떠오르네요.뭘 계산한다는 말도 없으니 memo등의 사용도 모르겠구요

cobb · Answer

음,, 질문이 너무 애매했습니다코드는 회사 코드라 공개하기가 좀 어렵네요 질문의 핵심은 option1이 결정되어야 option2 가 결정되고, option2가 결정되어야 option3 가 결정되고option3가 결정되어야 value가 결정되는 코드에서 (저는 value의 값이 필요합니다)useState-useEffect체인 vs useMemo에서 자체 업데이트 무엇이 더 나은가? 입니다 위의 코드를 useMemo로 바꾸어보자면const [option1, setOption1] &#61; useState(false) const option2 &#61; useMemo(() &#61;> {return option1 ? true : false},[option1]) const option3 &#61; useMemo(() &#61;> {return option2 ? true : false},[option2]) const value &#61; useMemo(() &#61;> {return option3 ? true : false},[option3]) useEffect(() &#61;> { fetch().then(() &#61;> {setOption1(true)}) },[])가 됩니다. (바꾸어보니 간단해보이네요 ㅋㅋ) 1. 크게 상관 없다2. useState-useEffect 체인이 ~한 측면에서 더 낫다3. useMemo를 활용한 것이 ~ 해서 더 낫다 이런거에 대한 판단을 해야하는데다른분들의 의견을 듣고 싶어서 물어봤습니다 (저 개인적으로는 1번) 나니야님 답변 감사합니다. 참고가 많이 되었습니다

나니야 · Answer

useState에 객체로{option1: true, opiton2:true, option3: true}로 두고하면 안되나요?

React useState, useEffect 체인 렌더링 문제

3개의 답변

#useeffect 목록