Skip to main content

useForceRender Deep Dive

The useForceRender hook provides a manual way to trigger a component re-render. This is particularly useful for optimizing performance when working with useRef or external state sources that don't automatically trigger React updates.

Core Concepts​

In React, components only re-render when their state or props change. If you are storing data in a useRef (which is stable across renders) or an external object, updating that data won't cause the UI to update. useForceRender bridges this gap.

const forceUpdate = useForceRender();
const dataRef = useRef({ count: 0 });

const increment = () => {
    dataRef.current.count++;
    // UI won't update automatically
    forceUpdate(); 
};

Optimization Patterns​

useForceRender is often used to avoid frequent state updates during rapid events.

  • Ref-first Logic: You can store complex or frequently changing data in a ref to avoid the overhead of React's state reconciliation on every small change, then call forceUpdate() only when the final result is ready or at a throttled interval.
  • External Subscriptions: If you're subscribing to a non-React store (like a vanilla JS event emitter or a legacy library), you can use useForceRender to tell React to refresh whenever the external data changes.

How it Works Step-by-Step​

  1. Initialization: The hook initializes a dummy state using useState(0).
  2. Triggering: When forceUpdate() is called:
    • It uses startTransition (available in React 18+) to mark the update as non-urgent.
    • It increments the dummy state: setState(c => c + 1).
  3. Re-render: Because the internal state of the hook changed, React is forced to schedule a re-render of the component using the hook.
  4. UI Refresh: During the re-render, your component reads the latest values from your refs or external sources and displays them.

Best Practice: Use useForceRender sparingly. In most cases, standard useState or useReducer is the correct approach. Reserve this hook for advanced optimization scenarios or integration with non-React codebases.

Full Example​

import { useForceRender, useRef } from '@archibald/client';

function TestComponent() {
    // We store data in a ref to avoid unnecessary renders
    const counter = useRef(0);
    const rerender = useForceRender();

    const increment = () => {
        // Increment the ref directly (no re-render yet)
        counter.current++;

        // After some logic, we manually tell React to update the UI
        if (counter.current % 5 === 0) {
            rerender();
        }
    };

    return (
        <div>
            <p>Counter (Ref): {counter.current}</p>
            <p>(Only re-renders on multiples of 5)</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}