Множественные вызовы средства обновления состояния из useState в компоненте вызывают несколько повторных отрисовок

Вы можете объединить состояние loading и состояние data в один объект состояния, а затем выполнить один вызов setState, и будет только один рендеринг.

Примечание: В отличие от setState в компонентах класса, setState, возвращенный из useState, не объединяет объекты с существующим состоянием, он полностью заменяет объект. Если вы хотите выполнить слияние, вам нужно будет прочитать предыдущее состояние и самостоятельно слить его с новыми значениями. Обратитесь к документы.

Я бы не стал слишком беспокоиться о чрезмерном вызове рендеров, пока вы не определите, что у вас проблемы с производительностью. Рендеринг (в контексте React) и фиксация обновлений виртуальной DOM в реальной DOM - это разные вещи. Рендеринг здесь относится к созданию виртуальных DOM, а не к обновлению DOM браузера. React может выполнять пакетные вызовы setState и обновлять DOM браузера с последним новым состоянием.

const {useState, useEffect} = React;

function App() {
  const [userRequest, setUserRequest] = useState({
    loading: false,
    user: null,
  });

  useEffect(() => {
    // Note that this replaces the entire object and deletes user key!
    setUserRequest({ loading: true });
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUserRequest({
          loading: false,
          user: data.results[0],
        });
      });
  }, []);

  const { loading, user } = userRequest;

  return (
    <div>
      {loading && 'Loading...'}
      {user && user.name.first}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

<script src = "https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id = "app"></div>

Альтернатива - напишите свой собственный хук слияния состояний

const {useState, useEffect} = React;

function useMergeState(initialState) {
  const [state, setState] = useState(initialState);
  const setMergedState = newState => 
    setState(prevState => Object.assign({}, prevState, newState)
  );
  return [state, setMergedState];
}

function App() {
  const [userRequest, setUserRequest] = useMergeState({
    loading: false,
    user: null,
  });

  useEffect(() => {
    setUserRequest({ loading: true });
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUserRequest({
          loading: false,
          user: data.results[0],
        });
      });
  }, []);

  const { loading, user } = userRequest;

  return (
    <div>
      {loading && 'Loading...'}
      {user && user.name.first}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

<script src = "https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id = "app"></div>

Пакетное обновление в react-hookshttps://github.com/facebook/react/issues/14259

React currently will batch state updates if they're triggered from within a React-based event, like a button click or input change. It will not batch updates if they're triggered outside of a React event handler, like an async call.

Небольшое дополнение к ответу https://stackoverflow.com/a/53575023/121143

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

const useMergedState = initial => {
  const [state, setState] = React.useState(initial);
  const setMergedState = newState =>
    typeof newState == "function"
      ? setState(prevState => ({ ...prevState, ...newState(prevState) }))
      : setState(prevState => ({ ...prevState, ...newState }));
  return [state, setMergedState];
};

Обновлять: оптимизированная версия, состояние не будет изменено, если входящее частичное состояние не было изменено.

const shallowPartialCompare = (obj, partialObj) =>
  Object.keys(partialObj).every(
    key =>
      obj.hasOwnProperty(key) &&
      obj[key] === partialObj[key]
  );

const useMergedState = initial => {
  const [state, setState] = React.useState(initial);
  const setMergedState = newIncomingState =>
    setState(prevState => {
      const newState =
        typeof newIncomingState == "function"
          ? newIncomingState(prevState)
          : newIncomingState;
      return shallowPartialCompare(prevState, newState)
        ? prevState
        : { ...prevState, ...newState };
    });
  return [state, setMergedState];
};

Это также имеет другое решение, использующее useReducer! сначала мы определяем наш новый setState.

const [state, setState] = useReducer(
  (state, newState) => ({...state, ...newState}),
  {loading: true, data: null, something: ''}
)

после этого мы можем просто использовать его как старые добрые классы this.setState, только без this!

setState({loading: false, data: test.data.results})

Как вы могли заметить, в нашем новом setState (как и в предыдущем случае с this.setState) нам не нужно обновлять все состояния вместе! например, я могу изменить одно из наших состояний следующим образом (и это не меняет другие состояния!):

setState({loading: false})

Здорово, ха ?!

Итак, давайте соберем все вместе:

import {useReducer} from 'react'

const getData = url => {
  const [state, setState] = useReducer(
    (state, newState) => ({...state, ...newState}),
    {loading: true, data: null}
  )

  useEffect(async () => {
    const test = await api.get('/people')
    if (test.ok){
      setState({loading: false, data: test.data.results})
    }
  }, [])

  return state
}

Поддержка машинописного текста. Спасибо П. Гэлбрейт, который ответил на это решение, Те, кто использует машинописный текст, могут использовать это:

useReducer<Reducer<MyState, Partial<MyState>>>(...)

где MyState - это тип вашего объекта состояния.

например В нашем случае это будет так:

interface MyState {
   loading: boolean;
   data: any;
   something: string;
}

const [state, setState] = useReducer<Reducer<MyState, Partial<MyState>>>(
  (state, newState) => ({...state, ...newState}),
  {loading: true, data: null, something: ''}
)

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

const [state, setState] = useReducer(
    (state, newState) => {
        newWithPrevState = isFunction(newState) ? newState(state) : newState
        return (
            {...state, ...newWithPrevState}
        )
     },
     initialState
)

// And then use it like this...
setState(prevState => {...})

isFunction проверяет, является ли переданный аргумент функцией (что означает, что вы пытаетесь получить доступ к prevState) или простым объектом. Вы можете найти эта реализация isFunction Алекса Гранде здесь.

Уведомление. Для тех, кто хочет много использовать этот ответ, я решил превратить его в библиотеку. Вы можете найти это здесь:

Github: https://github.com/thevahidal/react-use-setstate

NPM: https://www.npmjs.com/package/react-use-setstate

Это будет делать:

const [state, setState] = useState({ username: '', password: ''});

// later
setState({
    ...state,
    username: 'John'
});

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

ReactDOM.unstable_batchedUpdates(() => { ... })

Рекомендовано Даном Абрамовым здесь

Смотрите это пример

Чтобы воспроизвести поведение слияния this.setState из компонентов класса, React docs рекомендовать для использования функциональной формы useState с разбросом объектов - нет нужды для useReducer:

setState(prevState => {
  return {...prevState, loading, data};
});

Теперь два состояния объединены в одно, что сэкономит вам цикл рендеринга.

Есть еще одно преимущество с одним объектом состояния: loading и data являются состояниями зависимый. Некорректные изменения состояния становятся более очевидными, когда состояния объединяются:

setState({ loading: true, data }); // ups... loading, but we already set data

Вы можете даже лучше обеспечить согласованные состояния 1.) сделав статус - loading, success, error и т.д. - явный в вашем состоянии и 2.) используя useReducer для инкапсуляции логики состояния в редукторе:

const useData = () => {
  const [state, dispatch] = useReducer(reducer, /*...*/);

  useEffect(() => {
    api.get('/people').then(test => {
      if (test.ok) dispatch(["success", test.data.results]);
    });
  }, []);
};

const reducer = (state, [status, payload]) => {
  if (status === "success") return { ...state, data: payload, status };
  // keep state consistent, e.g. reset data, if loading
  else if (status === "loading") return { ...state, data: undefined, status };
  return state;
};

const App = () => {
  const { data, status } = useData();
  return status === "loading" ? <div> Loading... </div> : (
    // success, display data 
  )
}

const useData = () => {
  const [state, dispatch] = useReducer(reducer, {
    data: undefined,
    status: "loading"
  });

  useEffect(() => {
    fetchData_fakeApi().then(test => {
      if (test.ok) dispatch(["success", test.data.results]);
    });
  }, []);

  return state;
};

const reducer = (state, [status, payload]) => {
  if (status === "success") return { ...state, data: payload, status };
  // e.g. make sure to reset data, when loading.
  else if (status === "loading") return { ...state, data: undefined, status };
  else return state;
};

const App = () => {
  const { data, status } = useData();
  const count = useRenderCount();
  const countStr = `Re-rendered ${count.current} times`;

  return status === "loading" ? (
    <div> Loading (3 sec)... {countStr} </div>
  ) : (
    <div>
      Finished. Data: {JSON.stringify(data)}, {countStr}
    </div>
  );
}

//
// helpers
//

const useRenderCount = () => {
  const renderCount = useRef(0);
  useEffect(() => {
    renderCount.current += 1;
  });
  return renderCount;
};

const fetchData_fakeApi = () =>
  new Promise(resolve =>
    setTimeout(() => resolve({ ok: true, data: { results: [1, 2, 3] } }), 3000)
  );

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity = "sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4 = " crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity = "sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w = " crossorigin = "anonymous"></script>
<div id = "root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

PS: Обязательно используйте кастомные хуки префикс с use (useData вместо getData). Также переданный обратный вызов useEffect не может быть async.

Вы также можете использовать useEffect для обнаружения изменения состояния и соответствующего обновления других значений состояния.

В дополнение к отвечатьЯншун Тай вам лучше запоминать функцию setMergedState, чтобы она возвращала одну и ту же ссылку при каждом рендеринге вместо новой функции. Это может иметь решающее значение, если линтер TypeScript заставляет вас передавать setMergedState как зависимость в useCallback или useEffect в родительском компоненте.

import {useCallback, useState} from "react";

export const useMergeState = <T>(initialState: T): [T, (newState: Partial<T>) => void] => {
    const [state, setState] = useState(initialState);
    const setMergedState = useCallback((newState: Partial<T>) =>
        setState(prevState => ({
            ...prevState,
            ...newState
        })), [setState]);
    return [state, setMergedState];
};