title: Force re-render in react functional component
body: <p>I'm trying to update ReactDom when a function is called,</p>
  <pre><code>function showMessage(message, config) {
    ReactDOM.render(
      &lt;Message message={message.body} /&gt;,
      document.getElementById(config.targetElementId)
    );
  }
  </code></pre>
  <p>In the message component,</p>
  <pre><code>export default function Message({ message }) {
    const [open, setIsOpen] = useState(true);
  
    useEffect(() =&gt; {
      setIsOpen(true);
    }, [message]);
  </code></pre>
  <p>I'm using a useEffect to change the setIsOpen to true when the message changes. I want the component to call this useEffect every time showMessage(message, config) function is called. Now, the component is only re rendering if the message text is changed. message is a string like &quot;Example string&quot; . If I'm calling the function with showMessage(&quot;Example string&quot;, config) multiple times , it does not call the useEffect. Only if I make a change in the string ,  showMessage(&quot;Example stringssss&quot;, config), it re-renders. How do I  force re render each time the showMessage function  is called?</p>