Как использовать обратный вызов `setState` для реагирующих хуков

Для этого вам нужно использовать крючок useEffect.

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

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

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

Если вы хотите обновить предыдущее состояние, вы можете сделать это в хуках:

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


setCount(previousCount => previousCount + 1);

UseEffect является основным решением. Но, как упомянул Дэррил, использование 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.info(updatedNumber);
}

Ваш вопрос очень актуален. Позвольте мне сказать вам, что 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.info('effect called without change - by default');
    }
    else{
      console.info('effect called with change ');
    }
  }, [ageFlag,age]);

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

export default App;

Если вы хотите, чтобы обратный вызов setState выполнялся с хуками, используйте переменную флага и задайте блок IF ELSE OR IF внутри useEffect, чтобы при выполнении этих условий выполнялся только этот блок кода. В любом случае эффект запускается при изменении массива зависимостей, но этот внутренний код IF будет выполняться только при этих конкретных условиях.

Имитация обратного вызова setState с помощью useEffect, срабатывает только в состоянии обновления (не начальное состояние):

const [state, setState] = useState({ name: "Michael" })
const isFirstRender = useRef(true)
useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false // toggle flag after first render/mounting
    return;
  }
  console.info(state) // do something after state has updated
}, [state])

Пользовательский крючок useEffectUpdate

function useEffectUpdate(callback) {
  const isFirstRender = useRef(true);
  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false; // toggle flag after first render/mounting
      return;
    }
    callback(); // performing action after state has updated
  }, [callback]);
}

// client usage, given some state dep
const cb = useCallback(() => { console.info(state) }, [state]); // memoize callback
useEffectUpdate(cb);

Я думаю, что использование useEffect не является интуитивным способом.

Я создал обертку для этого. В этом пользовательском хуке вы можете передать свой обратный вызов параметру setState вместо параметра useState.

Я только что создал версию Typescript. Поэтому, если вам нужно использовать это в Javascript, просто удалите некоторые обозначения типов из кода.

Применение

const [state, setState] = useStateCallback(1);
setState(2, (n) => {
  console.info(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.info(состояние) напечатает 1, а не 2.

setState() ставит в очередь изменения состояния компонента и сообщает React, что этот компонент и его дочерние элементы необходимо повторно отобразить с обновленным состоянием.

Метод setState является асинхронным и фактически не возвращает промис. Итак, в случаях, когда мы хотим обновить или вызвать функцию, функция может быть вызвана обратным вызовом в функции setState в качестве второго аргумента. Например, в приведенном выше случае вы вызвали функцию как обратный вызов setState.

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

Приведенный выше код отлично работает для компонента класса, но в случае функционального компонента мы не можем использовать метод setState, и мы можем использовать хук эффекта использования для достижения того же результата.

Очевидный метод, который приходит на ум, заключается в том, что ypu может использовать с useEffect, как показано ниже:

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

useEffect(() => {
  console.info(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.info(state);
  }
}, [state])

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

У меня был вариант использования, когда я хотел создать вызов 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 в моей настройке не помогло (я обновляю родительское состояние из массива нескольких дочерних компонентов, и мне нужно знать, какой компонент обновил данные).

Обертывание setState в промис позволяет запускать произвольное действие после завершения:

import React, {useState} from 'react'

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

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


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

export default App;

Следующий вопрос поставил меня в правильном направлении: Функционирует ли пакетное обновление React при использовании хуков?

Как насчет этого:

const [Name, setName] = useState("");
...
onClick = {()=>{
setName("Michael")
setName(prevName=>{...}) //prevName is Michael?
}}

вы можете использовать следующие способы, которые я знал, чтобы получить последнее состояние после обновления:

1. использоватьЭффект
   https://reactjs.org/docs/hooks-reference.html#useeffect

    const [state, setState] = useState({name: "Michael"});
    
    const handleChangeEventName = () => {
      setState({name: "Jack"});
    }
    
    useEffect(() => {
      console.info(state.name); //"Jack"

      //do something here
    }, [state]);

2. функциональное обновление
   https://reactjs.org/docs/hooks-reference.html#functional-updates
   «Если новое состояние вычисляется с использованием предыдущего состояния, вы можете передать функцию в setState. Функция получит предыдущее значение и вернет обновленное значение».

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

    const handleChangeEventName = () => {
      setState({name: "Jack"})
      setState(prevState => {
        console.info(prevState.name);//"Jack"

        //do something here

        // return updated state
        return prevState;
      });
    }

3. использоватьRef
   https://reactjs.org/docs/hooks-reference.html#useref
   «Возвращенный объект ref будет сохраняться в течение всего срока службы компонента».

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

    const stateRef = useRef(state);
    stateRef.current  = state;
    const handleClick = () => {
      setState({name: "Jack"});

      setTimeout(() => {
        //it refers to old state object
        console.info(state.name);// "Michael";

        //out of syntheticEvent and after batch update
        console.info(stateRef.current.name);//"Jack"

        //do something here
      }, 0);
    }

В обработчике react syntheticEvent setState — это процесс пакетного обновления, поэтому каждое изменение состояния будет ожидаться и возвращать новое состояние. «setState() не всегда сразу обновляет компонент. Он может пакетно обновлять или откладывать обновление на потом»,
https://reactjs.org/docs/react-component.html#setstate

Вот полезная ссылка
Сохраняет ли React порядок обновления состояния?

Мы можем написать хук с именем useScheduleNextRenderCallback, который возвращает функцию «расписание». После вызова setState мы можем вызвать функцию «расписание», передав обратный вызов, который мы хотим запустить при следующем рендеринге.

import { useCallback, useEffect, useRef } from "react";

type ScheduledCallback = () => void;
export const useScheduleNextRenderCallback = () => {
  const ref = useRef<ScheduledCallback>();

  useEffect(() => {
    if (ref.current !== undefined) {
      ref.current();
      ref.current = undefined;
    }
  });

  const schedule = useCallback((fn: ScheduledCallback) => {
    ref.current = fn;
  }, []);

  return schedule;
};

Пример использования:

const App = () => {
  const scheduleNextRenderCallback = useScheduleNextRenderCallback();

  const [state, setState] = useState(0);

  const onClick = useCallback(() => {
    setState(state => state + 1);
    scheduleNextRenderCallback(() => {
      console.info("next render");
    });
  }, []);

  return <button onClick = {onClick}>click me to update state</button>;
};

Сокращенный тестовый пример: https://stackblitz.com/edit/react-ts-rjd9jk

Я написал кастомный хук с машинописным текстом, если он еще кому-то нужен.

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

export const useStateWithCallback = <T>(initialState: T): [state: T, setState: (updatedState: React.SetStateAction<T>, callback?: (updatedState: T) => void) => void] => {
    const [state, setState] = useState<T>(initialState);
    const callbackRef = useRef<(updated: T) => void>();

    const handleSetState = (updatedState: React.SetStateAction<T>, callback?: (updatedState: T) => void) => {
        callbackRef.current = callback;
        setState(updatedState);
    };

    useEffect(() => {
        if (typeof callbackRef.current === "function") {
            callbackRef.current(state);
            callbackRef.current = undefined;
        }
    }, [state]);

    return [state, handleSetState];
}

С помощью всех вас я смог создать этот пользовательский хук:

Очень похоже на класс this.setState(state, callback)

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

  const setStateCB = (newState, callback) => {
    callbackRef.current = callback;
    setState(newState);
  };

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

  return [state, setStateCB];
};

Таким образом, мы можем использовать его как..

const [isVisible, setIsVisible] = useStateWithCallback(false);

...

setIsVisible(true, () => console.info('callback called now!! =)');

Сохраняйте спокойствие и счастливого кодирования!

Я не думаю, что различать смонтированное или нет с помощью useRef - это хороший способ, не лучше ли определить значение, сгенерированное useState() в useEffect(), является ли оно начальным значением?

const [val, setVal] = useState(null)

useEffect(() => {
  if (val === null) return
  console.info('not mounted, val updated', val)
}, [val])

Пока у нас нет встроенной поддержки обратного вызова setState, мы можем сделать простой способ javascript... вызвать функцию и напрямую передать ей новые переменные.

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

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

  function doSomethingWCounter(newCounter) {
    console.info(newCounter); // 123
  }

Простое решение, просто установите

npm i use-state-with-callback

import React from 'react';
import { useStateWithCallbackLazy } from "use-state-with-callback";

const initialFilters = {
  smart_filter: "",
};

const MyCallBackComp = () => {
  const [filters, setFilters] = useStateWithCallbackLazy(initialFilters);

  const filterSearchHandle = (e) => {
    setFilters(
      {
        ...filters,
        smart_filter: e,
      },
      (value) => console.info("smartFilters:>", value)
    );
  };

  return (
    <Input
      type = "text"
      onChange = {(e) => filterSearchHandle(e.target.value)}
      name = "filter"
      placeholder = "Search any thing..."
    />
  );
};

зачислено: РЕАКТИВНЫЙ ОБРАТНЫЙ ВЫЗОВ USESTATE

Если вам не нужно обновлять состояние асинхронно, вы можете использовать ссылку для сохранения значения вместо useState.

const name = useRef("John");
name.current = "Michael";
console.info(name.current); // will print "Michael" since updating the ref is not async

Я думаю, вам нужны useState и useCallback:

• useState реагировать документ;
• useCallback реагировать документ;

Пример кода

import React, { useCallback, useState } from 'react';

const Test = () => {
  const [name, setName] = useState("");
  const testCallback = useCallback(() => console.info(name), [name]);

  return (
    <button onClick = {() => {
      setName("Michael")
      testCallback();
    }}>Name</button>
  )
};

export default Test;

Я изучил npm-библиотеку use-state-with-callback и другие подобные пользовательские хуки, но в конце концов понял, что могу просто сделать что-то вроде этого:

const [user, setUser] = React.useState(
  {firstName: 'joe', lastName: 'schmo'}
)

const handleFirstNameChange=(val)=> {
  const updatedUser = {
     ...user,
     firstName: val
  }
  setUser(updatedUser)
  updateDatabase(updatedUser)
}