Can you force a React component to rerender without calling setState

Question

With the help of code and example can u tell me Can you force a React component to rerender without calling setState?

Answer 1

In functional components, the best way to force a re-render without changing actual state is by using useState with a dummy value (e.g., a counter or a boolean toggle).

Implementation:

import React, { useState } from "react";

const ForceRerender = () => {

  const [, forceUpdate] = useState(0); // Dummy state

  const handleForceRender = () => {

    forceUpdate((prev) => prev + 1); // Increment to trigger rerender

  };

  console.log("Component Rendered"); // Observe re-renders

  return (

    <div>

      <h2>Force Rerender Example</h2>

      <button onClick={handleForceRender}>Force Rerender</button>

    </div>

  );

};

export default ForceRerender;

Related Question: Optimizing re-rendering of React child components