How to force a component to re-render without using useState in React?

Question

How to force a component to re-render without using useState in React?

Answer

You can use useReducer or the key prop trick to force re-renders.

1. useReducer method

import { useReducer } from 'react';

function useForceUpdate() {
  return useReducer((x) => x + 1, 0)[1];
}

function Demo() {
  const forceUpdate = useForceUpdate();
  return (
    <div>
      <p>Last render: {Date.now()}</p>
      <button onClick={forceUpdate}>Force Re-render</button>
    </div>
  );
}

✅ Each dispatch triggers a re-render without managing explicit state.

2. Key prop trick

function Component({ refreshKey }) {
  return <div key={refreshKey}>Rendered at {Date.now()}</div>;
}

✅ Changing key forces React to treat it as a new component instance.

Real-World Example

• Resetting components
• Forcing re-initialization of forms
• Re-triggering animations

Quick Practice

Build a “Refresh Timestamp” component that re-renders a clock only when you click a button.

Summary

Use useReducer or key changes to trigger controlled re-renders when state updates aren’t desired.