State 변경 전 effect 실행하기

Question

Functional component에서, 어떤 state가 변경되기 전에 effect를 실행할 수 있는 hook이 있는지 궁금합니다. useEffect / useLayoutEffect 등은 state가 변경된 뒤에 실행됩니다.

Class component의 componentWillUpdate같은 라이프 사이클을 functional component에서 사용할 수 있는 방법이 있을까요?

성원 · Answer

React Hook Flow (https://velog.io/@shmoon2917/React-hook%EC%9D%98-lifecycle)기준으로

state의 변경 -> 컴포넌트 리렌더 -> useEffect Update 순서이기 때문에 단순한 방법으로는 어려울 것 같아요

state의 변경 전에 effect안의 코드를 실행하는게 목적이라면 setState와 코드를 같은 함수에 두어 setState의 순서를 마지막에 놓는 방법이 방법이 있을 수 있고 (필요하다면 setState만 setTimeout으로 콜백처리)

state의 변경 -> 컴포넌트 리렌더 -> useEffect Update 라이프 사이클을 생각해서 state 변경 이전에 beforeSetState 성격의 임시 state를 두어서 useEffect를 트리거한 뒤 해당 Effect에서 실제 변경 해야하는 state를 set하는 방법이 있을 수 있겠네요.

손정현 · Answer

useEffect에서 함수를 반환하면 다음번에 useEffect가 돌기전에 돌아갑니다. (clean-up function 이라고 하죠). 다만, 최초 렌더 시에는 돌지 않습니다.
정확히는 렌더 직후 effect 변경 사항이 돌기전에 cleanup 함수가 돌아갑니다. 이후 effect의 변경 사항이 적용되고 브라우저 페인트가 됩니다

componentWillUpdate는 react 17에서 deprecated 되어서 사용을 지양하는 것으로 알고 있습니다.