Официальное решение React Hooks для forceUpdate:

const [_, forceUpdate] = useReducer((x) => x + 1, 0);
// usage
<button onClick={forceUpdate}>Force update</button>

Рабочий пример

const App = () => {
  const [_, forceUpdate] = useReducer((x) => x + 1, 0);

  return (
    <div>
      <button onClick={forceUpdate}>Force update</button>
      <p>Forced update {_} times</p>
    </div>
  );
};

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.1/umd/react.production.min.js" integrity="sha256-vMEjoeSlzpWvres5mDlxmSKxx6jAmDNY4zCt712YCI0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.1/umd/react-dom.production.min.js" integrity="sha256-QQt6MpTdAD0DiPLhqhzVyPs1flIdstR4/R7x4GqCvZ4=" crossorigin="anonymous"></script>
<script>var useReducer = React.useReducer</script>
<div id="root"></div>

Альтернатива ответу @MinhKha:

Это может быть намного чище с useReducer:

const [, forceUpdate] = useReducer(x => x + 1, 0);

Использование: forceUpdate() - очиститель без параметров

Вы можете просто определить useState следующим образом:

const [, forceUpdate] = React.useState(0);

И использование: forceUpdate(n => !n)

Надеюсь на эту помощь!

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

Пример

const { useState, useEffect } = React;

function Foo() {
  const [, forceUpdate] = useState();

  useEffect(() => {
    setTimeout(forceUpdate, 2000);
  }, []);

  return <div>{Date.now()}</div>;
}

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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Простой код

const forceUpdate = React.useReducer(bool => !bool)[1];

Использовать:

forceUpdate();

Возможный вариант - принудительное обновление только определенного компонента с помощью key. Обновление ключа запускает рендеринг компонента (который раньше не обновлялся)

Например:

const [tableKey, setTableKey] = useState(1);
...

useEffect(() => {
    ...
    setTableKey(tableKey + 1);
}, [tableData]);

...
<DataTable
    key={tableKey}
    data={tableData}/>

Вы можете (ab) использовать обычные хуки, чтобы принудительно выполнить повторную визуализацию, воспользовавшись тем фактом, что React не печатает логические значения в коде JSX.

// create a hook
const [forceRerender, setForceRerender] = React.useState(true);

// ...put this line where you want to force a rerender
setForceRerender(!forceRerender);

// ...make sure that {forceRerender} is "visible" in your js code
// ({forceRerender} will not actually be visible since booleans are
// not printed, but updating its value will nonetheless force a
// rerender)
return (
  <div>{forceRerender}</div>
)

Мой вариант forceUpdate не через counter, а через объект:

// Emulates `forceUpdate()`
const [unusedState, setUnusedState] = useState()
const forceUpdate = useCallback(() => setUnusedState({}), [])

Потому что {} !== {} каждый раз.

Решение в одной строке:

const [,forceRender] = useReducer((s) => s+1, 0)

Вы можете узнать об useReducer здесь. https://reactjs.org/docs/hooks-reference.html#usereducer

Однострочное решение:

const useForceUpdate = () => useState()[1];

useState возвращает пару значений: текущее состояние и функция, которая его обновляет - state и setter, здесь мы используем только установщик в для принудительного повторного рендеринга.

react-tidy имеет специальный крючок, который называется useRefresh:

import React from 'react'
import {useRefresh} from 'react-tidy'

function App() {
  const refresh = useRefresh()
  return (
    <p>
      The time is {new Date()} <button onClick={refresh}>Refresh</button>
    </p>
  )
}

Подробнее об этом хуке

Заявление об ограничении ответственности. Я автор этой библиотеки.

Это будет отображать зависимые компоненты 3 раза (массивы с одинаковыми элементами не равны):

const [msg, setMsg] = useState([""])

setMsg(["test"])
setMsg(["test"])
setMsg(["test"])

Для обычных компонентов на основе React Class см. React Docs для forceUpdate api по адресу this URL. В документах упоминается, что:

Обычно вам следует избегать любого использования forceUpdate () и читать только из this.props и this.state в render ()

Однако в документации также упоминается, что:

Если ваш метод render () зависит от некоторых других данных, вы можете сообщить React, что компоненту требуется повторный рендеринг, вызвав forceUpdate ().

Итак, хотя варианты использования forceUpdate могут быть редкими, и я никогда не использовал его, тем не менее я видел, как его использовали другие разработчики в некоторых устаревших корпоративных проектах, над которыми я работал.

Таким образом, эквивалентную функциональность для функциональных компонентов см. В React Docs for HOOKS по адресу этот URL. По указанному выше URL-адресу можно использовать ловушку «useReducer», чтобы обеспечить forceUpdate функциональность для функциональных компонентов.

Ниже представлен образец рабочего кода that does not use state or props, который также доступен в CodeSandbox по адресу этот URL

import React, { useReducer, useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  // Use the useRef hook to store a mutable value inside a functional component for the counter
  let countref = useRef(0);

  const [, forceUpdate] = useReducer(x => x + 1, 0);

  function handleClick() {
    countref.current++;
    console.log("Count = ", countref.current);
    forceUpdate(); // If you comment this out, the date and count in the screen will not be updated
  }

  return (
    <div className="App">
      <h1> {new Date().toLocaleString()} </h1>
      <h2>You clicked {countref.current} times</h2>
      <button
        onClick={() => {
          handleClick();
        }}
      >
        ClickToUpdateDateAndCount
      </button>
    </div>
  );
}

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

ПРИМЕЧАНИЕ. Альтернативный подход с использованием ловушки useState (вместо useReducer) также доступен по адресу по этому URL-адресу. .

Есть много способов принудительного повторного рендеринга в Hook.

Для меня простой способ с useState() и подсказкой значений эталонного объекта.

const [, forceRender] = useState({});

// Anywhre
forceRender({});

Пример Codesandbox