title: How can I push new value to array of object by dynamic key in useState?
body: <p>I have a website for recording the video 15 seconds.
  And I want to capture <code>canvas</code> to <code>blob</code> every 40 millisecond. (25FPS)
  So, then I should to get 375 blobs.</p>
  <pre class="lang-js prettyprint-override"><code>// requestAnimationFrame
  const loop = async () =&gt; {
    sequenceRef.current = setTimeout(() =&gt; {
      setSequence((prev) =&gt; [
         ...prev,
         new Promise((resolve) =&gt; webcam.toBlob(resolve, &quot;image/webp&quot;)),
      ]);
      animationFrame.current = requestAnimationFrame(loop);
    }, 40);
  };
  loop();
  
  // with setInterval
  sequenceRef.current = setInterval(() =&gt; {
    setSequence((prev) =&gt; [
      ...prev,
      new Promise((resolve) =&gt; webcam.toBlob(resolve, &quot;image/webp&quot;)),
    ]);
  }, 1000 / FPS);
  </code></pre>
  <p>BUT I try to use <code>requestAnimationFrame</code> or <code>setInterval</code> for 40 millisecond
  and sometimes it normally and sometimes it can capture less than 375.
  These two solutions is not solve my problem.
  (I think it cause by device performance.)</p>
  <p>So that, I try to other ways.
  I decide to create like a time-mapping in object.
  and each object key has string value in array</p>
  <p>Every second push the new blob into array
  some second has loss some blob but it fine.</p>
  <p>I want to use <code>useState</code> to collect data in this format like this</p>
  <pre class="lang-js prettyprint-override"><code>timeSequence = {
    &quot;1&quot;: [&quot;blob-1s-1&quot;, &quot;blob-1s-2&quot;, &quot;blob-1s-3&quot;],
    &quot;2&quot;: [&quot;blob-2s-1&quot;, &quot;blob-2s-2&quot;],
    &quot;2&quot;: [&quot;blob-3s-1&quot;, &quot;blob-3s-2&quot;, &quot;blob-3s-3&quot;],
    ...
  }
  </code></pre>
  <p>I use <code>useState</code> for push a new value to array of object but it not work :(
  each key has just one value. I do not know why.</p>
  <p>here is my code
  (do not care about push promise in array)</p>
  <pre class="lang-js prettyprint-override"><code>const [sequenceObj, setSequenceObj] = useState&lt;any&gt;({
    &quot;0&quot;: [],
    &quot;1&quot;: [],
    &quot;2&quot;: [],
    &quot;3&quot;: [],
    &quot;4&quot;: [],
    &quot;5&quot;: [],
    &quot;6&quot;: [],
    &quot;7&quot;: [],
    &quot;8&quot;: [],
    &quot;9&quot;: [],
    &quot;10&quot;: [],
    &quot;11&quot;: [],
    &quot;12&quot;: [],
    &quot;13&quot;: [],
    &quot;14&quot;: [],
    &quot;15&quot;: [],
  });
  
  useEffect(() =&gt; {
    const loop = async () =&gt; {
      setTimeout(() =&gt; {
        setSequenceObj((prev: any) =&gt; ({
          ...prev,
          [`${currentTime}`]: [
            ...sequenceObj[`${currentTime}`],
            new Promise((resolve) =&gt; webcam.toBlob(resolve, &quot;image/webp&quot;)),
          ];,
        }));
        animationFrame.current = requestAnimationFrame(loop);
      }, 1000 / FPS);
    };
  
    loop();
  }, [currentTime])
  </code></pre>