title: State not updating in useEffect
body: <p>I have a problem similar to the following one, I am having a component in my app (a table), inside this table I have list of rows, and each row has a button called &quot;<strong>change password</strong>&quot;, if the user clicked on <strong>change password</strong> say for example for user x, a modal will show. Inside this modal there is a text field, where you have to write a new password for the user.</p>
  <p>The problem is that the textfield that lives inside this modal doesn't update. and the reason is that it's inside useffect.</p>
  <p>You might say, okay, it's simple, just pass the state variable of that text field inside the dependency array of the useEffect. Okay, first of all. you're right. but the problem is that if the state of the useEffect changed, it will cause two problems:</p>
  <ol>
  <li>the modal will flash (show it's animation) quickly on each keyboard keystroke.</li>
  <li>the whole list of users (the table of the users) will re-render again (which is quite big actually).</li>
  </ol>
  <p>I know my explaining is like an egg. but here's the summary of 3 hours of trying to demonstrate my problem in a sample, I couldn't come up with a more obvious example, so I'm sorry.</p>
  <p>The following sample shows not the same problem, but.. maybe... it's the same problem (not sure). The idea is... You have a list of items (let's say it has 99999 rows), and there's a table that has a TextField on each row, if you changed any of the text fields, I know, it's not a problem, it's going to update the state everywhere.. anyway, the problem is if you opened the console, you'll see the output &quot;rerendering the whole thing!&quot; getting printed out every time you press any key on your keyboard.</p>
  <p>Now it's normal to be like that, however, remember, our list has 99999x items, which means that the list is going to render again and again every time.</p>
  <p>In the case of my app, I couldn't split the <strong>showModal</strong> logic from the useEffect because the modal has particular information related exclusively to the current row in the <code>.map()</code> loop. For example, to attach the ideas here, in the following example, it's the <code>placeholder</code> prop on the input element, look... it has <code>doc.id</code>, i.e. the scope of the current tick of the loop is the only way I can access this value.</p>
  <p>now without speaking too much, here's the (very bad sample) I was able to come up with.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import "./styles.css";
  import { useEffect, useState } from "react";
  
  export default function App() {
    const [content, setContent] = useState("");
    const [inputValue, setInputValue] = useState("");
    const data = [
      // very long list
      {
        id: 1
      },
      {
        id: 2
      },
      {
        id: 3
      }
      // ... 999.999.99.9.99999.999999x times longer...etc
    ];
  
    useEffect(() =&gt; {
      // say for example this is a conditional rendering after an async task
      console.log("rerendering the whole thing!");
      setContent(
        &lt;table&gt;
          {data.map((doc) =&gt; (
            &lt;tr key={doc.id}&gt;
              &lt;td&gt;
                &lt;input
                  value={inputValue}
                  onChange={({ target: { value } }) =&gt; setInputValue(value)}
                  label="write anything here"
                  placeholder={doc.id}
                /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          ))}
        &lt;/table&gt;
      );
    }, [inputValue]);
  
    return content;
  }</code></pre>
  </div>
  </div>
  </p>