Tengo un componente de función y quiero forzarlo a volver a renderizar.

¿Como lo puedo hacer?
Como no hay instancia thisNo puedo llamar this.forceUpdate().

🎉 Ahora puedes, usando Ganchos de reacción

Usando ganchos de reacción, ahora puedes llamar useState() en su componente de función.

useState() devolverá una matriz de 2 cosas:

1. Un valor, que representa el estado actual.
2. Su colocador. Úselo para actualizar el valor.

Actualizar el valor por su setter obligará a su componente de función a volver a renderizar,
al igual que forceUpdate lo hace:

import React, { useState } from 'react';

//create your forceUpdate hook
function useForceUpdate(){
    const [value, setValue] = useState(0); // integer state
    return () => setValue(value => value + 1); // update state to force render
    // An function that increment 👆🏻 the previous state like here 
    // is better than directly setting `value + 1`
}

function MyComponent() {
    // call your hook here
    const forceUpdate = useForceUpdate();
    
    return (
        <div>
            {/*Clicking on the button will force to re-render like force update does */}
            <button onClick={forceUpdate}>
                Click to re-render
            </button>
        </div>
    );
}

Puede encontrar una demostración aquí.

El componente anterior utiliza una función de enlace personalizada (useForceUpdate) que usa el gancho de estado de reacción useState. Incrementa el valor del estado del componente y, por lo tanto, le dice a React que vuelva a renderizar el componente.

EDITAR

En una versión anterior de esta respuesta, el fragmento usaba un valor booleano y lo alternaba forceUpdate(). Ahora que edité mi respuesta, el fragmento usa un número en lugar de un valor booleano.

Por qué ? (me preguntarías)

Porque una vez me pasó que mi forceUpdate() fue llamado dos veces posteriormente desde 2 eventos diferentes y, por lo tanto, estaba restableciendo el valor booleano en su estado original, y el componente nunca se representó.

Esto se debe a que en el useStatecolocador de (setValue aquí), React comparar el estado anterior con el nuevo, y renderizar sólo si el estado es diferente.

Actualizar reaccionar v16.8 (versión del 16 de febrero de 2019)

Ya que reaccionar 16.8 lanzado con ganchoslos componentes de la función tienen la capacidad de mantener persistente state. Con esa habilidad ahora puedes imitar a forceUpdate:

function App() {
  const [, updateState] = React.useState();
  const forceUpdate = React.useCallback(() => updateState({}), []);
  console.log("render");
  return (
    <div>
      <button onClick={forceUpdate}>Force Render</button>
    </div>
  );
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root"/>

Tenga en cuenta que este enfoque debe ser reconsiderado y en mayoria de los casos cuando necesita forzar una actualización, probablemente esté haciendo algo mal.

Antes de reaccionar 16.8.0

No, no puedes, los componentes de la función State-Less son simplemente normales functions que regresa jsxno tiene acceso a los métodos del ciclo de vida de React ya que no se está extendiendo desde el React.Component.

Piense en función-componente como el render parte del método de los componentes de la clase.

Preguntas frecuentes oficiales ahora recomienda esta manera si De Verdad necesito hacerlo:

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

  function handleClick() {
    forceUpdate();
  }

La forma más sencilla 👌

si desea forzar una nueva representación, agregue un estado ficticio que pueda cambiar para iniciar una nueva representación.

const [rerender, setRerender] = useState(false);

...
setRerender(!rerender);     //whenever you want to re-render

Y esto asegurará una nueva renderización, y puedes llamar setRerender(!rerender) donde quieras, cuando quieras 🙂

Usé una biblioteca de terceros llamada
usar-forzar-actualizar

para forzar la representación de mis componentes funcionales de reacción. Funcionó como el encanto. Simplemente use importar el paquete en su proyecto y utilícelo así.

import useForceUpdate from 'use-force-update';

const MyButton = () => {

  const forceUpdate = useForceUpdate();

  const handleClick = () => {
    alert('I will re-render now.');
    forceUpdate();
  };

  return <button onClick={handleClick} />;
};

Mejor enfoque: no se vuelven a crear variables en exceso en cada renderizado:

const forceUpdateReducer = (i) => i + 1

export const useForceUpdate = () => {
  const [, forceUpdate] = useReducer(forceUpdateReducer, 0)
  return forceUpdate
}

Uso:

const forceUpdate = useForceUpdate()

forceUpdate()

Si ya tiene un estado dentro del componente de la función y no desea modificarlo y requiere una nueva representación, puede falsificar una actualización de estado que, a su vez, volverá a representar el componente.

const [items,setItems] = useState({
   name:'Your Name',
   status: 'Idle'
})
const reRender = () =>{
setItems((state) => [...state])
}

esto mantendrá el estado como estaba y hará reaccionar pensando que el estado ha sido actualizado