It makes sense that the incoherent render would not be committed to browser and that it would not have any consequences most of the time. But that means that you render logic must be ready to manage incoherency between props and states without crashing. E.g. a list of resource ids in props that doesn't match a list of http requests from a previous id list in the state could lead to weird situations. This is a worry that didn't exist in class components.

The equivalent ways in functional components using Hooks:In a state variable: useState or useReducer. Updates in state variables will cause a re-render of the component.In a ref: Equivalent to instance variables in class components. Mutating the .current property won’t cause a re-render.

const forceUpdate = () => useState(0)[1];

const [, updateState] = React.useState(); const forceUpdate = React.useCallback(() => updateState({}), []);

const [value, set] = useState(true); //boolean state return () => set(!value); // toggle the state to force render