반응 후크에서`setState` 콜백을 사용하는 방법

React hooks는 useState구성 요소 상태를 설정하기 위해 도입 되었습니다. 그러나 후크를 사용하여 아래 코드와 같이 콜백을 대체하려면 어떻게해야합니까?

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

상태가 업데이트 된 후에 뭔가를하고 싶습니다.

useEffect추가 작업을 수행하는 데 사용할 수 있지만 비트 코드가 필요한 이전 상태 값을 확인해야합니다. useState후크 와 함께 사용할 수있는 간단한 솔루션을 찾고 있습니다 .

이를 위해서는 useEffect후크를 사용해야합니다.

const [counter, setCounter] = useState(0);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
   console.log('Do something after counter has changed', counter);
}, [counter]);

이전 상태를 업데이트하려면 후크에서 다음과 같이 할 수 있습니다.

const [count, setCount] = useState(0);


setCount(previousCount => previousCount + 1);

useEffect, 상태 업데이트 에서만 발생 합니다 .

const [state, setState] = useState({ name: "Michael" })
const isFirstRender = useRef(true)

useEffect(() => {
  if (!isFirstRender.current) {
    console.log(state) // do something after state has updated
  }
}, [state])

useEffect(() => { 
  isFirstRender.current = false // toggle flag after first render/mounting
}, [])

위는 setState콜백을 가장 잘 모방하고 초기 상태 에서는 실행되지 않습니다 . 여기에서 사용자 지정 후크를 추출 할 수 있습니다.

function useEffectUpdate(effect, deps) {
  const isFirstRender = useRef(true) 

  useEffect(() => {
    if (!isFirstRender.current) {
      effect()
    }  
  }, deps) // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    isFirstRender.current = false;
  }, []);
}

// ... Usage inside component
useEffectUpdate(() => { console.log(state) }, [state])

사용 useEffect은 직관적 인 방법이 아니라고 생각 합니다.

나는 이것을 위해 래퍼를 만들었습니다. 이 커스텀 후크에서는 setState매개 변수 대신 매개 변수로 콜백을 전송할 수 있습니다 useState.

방금 Typescript 버전을 만들었습니다. 따라서 Javascript에서 이것을 사용해야하는 경우 코드에서 유형 표기법을 제거하십시오.

용법

const [state, setState] = useStateCallback(1);
setState(2, (n) => {
  console.log(n) // 2
});

선언

import { SetStateAction, useCallback, useEffect, useRef, useState } from 'react';

type Callback<T> = (value?: T) => void;
type DispatchWithCallback<T> = (value: T, callback?: Callback<T>) => void;

function useStateCallback<T>(initialState: T | (() => T)): [T, DispatchWithCallback<SetStateAction<T>>] {
  const [state, _setState] = useState(initialState);

  const callbackRef = useRef<Callback<T>>();
  const isFirstCallbackCall = useRef<boolean>(true);

  const setState = useCallback((setStateAction: SetStateAction<T>, callback?: Callback<T>): void => {
    callbackRef.current = callback;
    _setState(setStateAction);
  }, []);

  useEffect(() => {
    if (isFirstCallbackCall.current) {
      isFirstCallbackCall.current = false;
      return;
    }
    callbackRef.current?.(state);
  }, [state]);

  return [state, setState];
}

export default useStateCallback;

약점

전달 된 화살표 함수가 변수 외부 함수를 참조하는 경우 상태가 업데이트 된 후 값이 아닌 현재 값을 캡처합니다. 위의 사용 예에서 console.log (state) 는 2가 아닌 1을 인쇄합니다.

setState() 컴포넌트 상태의 변경 사항을 대기열에 추가하고이 컴포넌트와 그 자식을 업데이트 된 상태로 다시 렌더링해야한다고 React에 알립니다.

setState 메서드는 비동기 적이며 사실 약속을 반환하지 않습니다. 따라서 함수를 업데이트하거나 호출하려는 경우 setState 함수에서 두 번째 인수로 해당 함수를 콜백이라고 부를 수 있습니다. 예를 들어, 위의 경우 함수를 setState 콜백으로 호출했습니다.

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

위의 코드는 클래스 컴포넌트에 대해 잘 작동하지만 함수 컴포넌트의 경우 setState 메소드를 사용할 수 없으며 동일한 결과를 얻기 위해 use effect hook을 사용할 수 있습니다.

분명한 방법은 ypu가 useEffect와 함께 사용할 수 있다는 것입니다.

const [state, setState] = useState({ name: "Michael" })

useEffect(() => {
  console.log(state) // do something after state has updated
}, [state])

그러나 이것은 첫 번째 렌더링에서도 발생하므로 첫 번째 렌더링 이벤트를 확인하고 상태 렌더링을 피할 수있는 코드를 다음과 같이 변경할 수 있습니다. 따라서 구현은 다음과 같은 방법으로 수행 할 수 있습니다.

여기에서 사용자 후크를 사용하여 첫 번째 렌더링을 식별 할 수 있습니다.

useRef 후크를 사용하면 기능적 구성 요소에서 가변 변수를 만들 수 있습니다. DOM 노드 / React 요소에 액세스하고 다시 렌더링을 트리거하지 않고 변경 가능한 변수를 저장하는 데 유용합니다.

const [state, setState] = useState({ name: "Michael" });
const firstTimeRender = useRef(true);

useEffect(() => {
 if (!firstTimeRender.current) {
    console.log(state);
  }
}, [state])

useEffect(() => { 
  firstTimeRender.current = false 
}, [])

내 설정에서 useEffect를 사용하여 동일한 문제가 발생했습니다 (배열 여러 하위 구성 요소에서 부모의 상태를 업데이트하고 어떤 구성 요소가 데이터를 업데이트했는지 알아야 함).

promise에 setState를 래핑하면 완료 후 임의의 작업을 트리거 할 수 있습니다.

import React, {useState} from 'react'

function App() {
  const [count, setCount] = useState(0)

  function handleClick(){
    Promise.resolve()
      .then(() => { setCount(count => count+1)})
      .then(() => console.log(count))
  }


  return (
    <button onClick= {handleClick}> Increase counter </button>
  )
}

export default App;

다음 질문은 저를 올바른 방향으로 인도합니다. 후크를 사용할 때 React 배치 상태가 업데이트됩니까?

귀하의 질문은 매우 유효합니다. useEffect가 기본적으로 한 번 실행되고 종속성 배열이 변경 될 때마다 실행된다는 점을 말씀 드리겠습니다.

아래 예를 확인하십시오. :

import React,{ useEffect, useState } from "react";

const App = () => {
  const [age, setAge] = useState(0);
  const [ageFlag, setAgeFlag] = useState(false);

  const updateAge = ()=>{
    setAgeFlag(false);
    setAge(age+1);
    setAgeFlag(true);
  };

  useEffect(() => {
    if(!ageFlag){
      console.log('effect called without change - by default');
    }
    else{
      console.log('effect called with change ');
    }
  }, [ageFlag,age]);

  return (
    <form>
      <h2>hooks demo effect.....</h2>
      {age}
      <button onClick={updateAge}>Text</button>
    </form>
  );
}

export default App;

후크와 함께 setState 콜백을 실행하려면 플래그 변수를 사용하고 useEffect 내부에 IF ELSE OR IF 블록을 제공하여 해당 조건이 충족되면 해당 코드 블록 만 실행되도록합니다. 그러나 시간 효과는 종속성 배열 변경으로 실행되지만 효과 내부의 IF 코드는 해당 특정 조건에서만 실행됩니다.

상태가 설정된 후 일부 매개 변수 를 사용하여 API를 호출 하려는 사용 사례 가 있습니다. 이 매개 변수를 내 상태로 설정하고 싶지 않았으므로 사용자 지정 후크를 만들었고 여기에 내 솔루션이 있습니다.

import { useState, useCallback, useRef, useEffect } from 'react';
import _isFunction from 'lodash/isFunction';
import _noop from 'lodash/noop';

export const useStateWithCallback = initialState => {
  const [state, setState] = useState(initialState);
  const callbackRef = useRef(_noop);

  const handleStateChange = useCallback((updatedState, callback) => {
    setState(updatedState);
    if (_isFunction(callback)) callbackRef.current = callback;
  }, []);

  useEffect(() => {
    callbackRef.current();
    callbackRef.current = _noop; // to clear the callback after it is executed
  }, [state]);

  return [state, handleStateChange];
};

UseEffect는 기본 솔루션입니다. 그러나 Darryl이 언급했듯이 useEffect를 사용하고 두 번째 매개 변수에 상태를 전달하면 한 가지 결함이 있으므로 구성 요소가 초기화 프로세스에서 실행됩니다. 업데이트 된 상태의 값을 사용하여 콜백 함수를 실행하려면 로컬 상수를 설정하고 setState와 콜백 모두에서 사용할 수 있습니다.

const [counter, setCounter] = useState(0);

const doSomething = () => {
  const updatedNumber = 123;
  setCounter(updatedNumber);

  // now you can "do something" with updatedNumber and don't have to worry about the async nature of setState!
  console.log(updatedNumber);
}