Home > @cascadiacollections/fluentui-compat > useForceUpdate

useForceUpdate() function

Hook to force update a function component by triggering a re-render.

**⚠️ Performance Warning**: This hook will intentionally cause re-renders and should be used sparingly with clear intent. Overuse may introduce performance issues and long-running tasks. Consider using React's built-in state management patterns (useState, useReducer) or memoization strategies (useMemo, useCallback) before resorting to force updates.

**🔧 Development Tools**: In development builds, this hook provides enhanced debugging features: - **Performance monitoring**: Tracks call frequency and warns about excessive usage - **Rapid call detection**: Alerts when multiple calls occur within a single frame (16ms) - **DevTools integration**: Displays call count in React DevTools for debugging - **Profiler marks**: Creates performance markers for React Profiler analysis - **Cleanup warnings**: Detects components with short lifetimes but many force updates

This implementation uses useReducer for optimal performance: - **Memory efficient**: No additional closures or function allocations - **Stable reference**: The returned function identity never changes - **Minimal overhead**: Uses React's optimized reducer dispatch mechanism - **No dependencies**: Eliminates the need for additional custom hooks

Signature:

export declare function useForceUpdate(): () => void;

Returns:

() => void

A function that when called will force the component to re-render. The returned function has a stable identity across renders.

Example 1

function MyComponent() {
  const forceUpdate = useForceUpdate();

  const handleRefresh = useCallback(() => {
    // Only use when you have a legitimate need to force re-render
    // after external state changes that React can't detect
    forceUpdate();
  }, [forceUpdate]);

  return <button onClick={handleRefresh}>Refresh</button>;
}

Example 2

// ❌ Avoid overuse - this can cause performance problems
function BadExample() {
  const forceUpdate = useForceUpdate();

  useEffect(() => {
    // Don't force updates in effects without clear justification
    forceUpdate(); // This creates unnecessary render cycles
  });
}

// ✅ Better - use appropriate React patterns
function GoodExample() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    // Update state instead of forcing renders
    fetchData().then(setData);
  }, []);
}

Example 3

// 🔧 Development debugging with React DevTools
function DebuggingExample() {
  const forceUpdate = useForceUpdate();

  // In development, you'll see:
  // - Console warnings for excessive usage
  // - Call count in React DevTools
  // - Performance marks in browser profiler

  return <button onClick={forceUpdate}>Debug Render</button>;
}