<p dir="auto">Hi React Community, reading the features related to useState and batching, im finding problems where the state is not updated or when i have memoised a method using <code class="notranslate">useCallback</code></p>
<p dir="auto">i would like to suggest about add a method to get the state in useState, an example for this approach can be this</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const useGetState = (initialValue, withGetCallback = false) =&gt; {
  const [state, setState] = useState(initialValue);
  if (!withGetCallback) {
    return [state, setState];
  }

  const stateRef = useRef(state);
  useEffect(() =&gt; {
    stateRef.current = state;
  }, [state]);

  const getState = useCallback(() =&gt; {
    return stateRef.current;
  }, [stateRef]);

  return [state, setState, getState, stateRef];
};"><pre class="notranslate"><code class="notranslate">const useGetState = (initialValue, withGetCallback = false) =&gt; {
  const [state, setState] = useState(initialValue);
  if (!withGetCallback) {
    return [state, setState];
  }

  const stateRef = useRef(state);
  useEffect(() =&gt; {
    stateRef.current = state;
  }, [state]);

  const getState = useCallback(() =&gt; {
    return stateRef.current;
  }, [stateRef]);

  return [state, setState, getState, stateRef];
};
</code></pre></div>
<p dir="auto">an implementation could looks like this</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    const [state, setState, getState] = useGetState(null, true);
    // back compatibility
    const [state, setState] = useGetState(null);  // (exactly same as normal useState)
    // complex scenario
    const [state, setState, getState, stateRef] = useGetState(null, true);
    "><pre class="notranslate"><code class="notranslate">    const [state, setState, getState] = useGetState(null, true);
    // back compatibility
    const [state, setState] = useGetState(null);  // (exactly same as normal useState)
    // complex scenario
    const [state, setState, getState, stateRef] = useGetState(null, true);
    
</code></pre></div>
<p dir="auto">using useRef we can be able to get the instance of the value in any moment and in any place due that these callbacks never changes during the execution</p>
<p dir="auto">feature request:  getState, example, const [state, setState, getState] = useState(null);</p>
<p dir="auto">it is ok to use the simple variable in a dependent uses effect, but not ok in not a dependant use effect.</p>
<p dir="auto">the state is a simple variable. which is closure passed into functions, so it is not updated.<br>
and setState with a function argument is asynchronously dispatched.<br>
I suggest adding a synchronous function getState.</p>
<p dir="auto">it will be useful in simple js functions that are defined in useEffect for integration with not react js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
  const [audioTrack, setAudioTrack] = useState(null);
  const [savedSelectedAudioTrack, setSavedSelectedAudioTrack] = useState(null);
  const [audioContext, setAudioContext] = useState(null);

// use useEffect to run once
useEffect( () =&gt;{
const handleParticipant = (participant) =&gt; {

          const availableTracks = Array.from(
            participant.tracks.values()
          ).filter(
            (publication) =&gt; publication.isSubscribed,
          ).map(
            (publication) =&gt; publication.track,
          );

          const audioTracks = availableTracks.filter(
            (track) =&gt; track.kind === 'audio',
          );
          
          const selectedAudioTrack =
            audioTracks.length === 0 ? null : audioTracks[0];

          if (selectedAudioTrack !== savedSelectedAudioTrack) { // here savedSelectedAudioTrack will not work
            setSavedSelectedAudioTrack(selectedAudioTrack);
            if (audioContext)
              setAudioTrack(
                // eslint-disable-next-line prettier/prettier
                audioContext.MediaStreamAudioSourceNode(selectedAudioTrack)
              );
            else setTimeout(() =&gt; handleParticipant(participant), 100);

            // setSelectedAudioTrack(selectedAudioTrack1);
            window.hasAudioTrack = true;
          } else {
            window.hasAudioTrack = false;
          }


          console.log(
            'audioTracks.length:',
            audioTracks.length
          );
  };


  // create audiocontext and 3rd parity library and add event handler to 3rd parity library
 setAudioContext(createdAudioContext);
 3rdParityLibrary.handleEvent=handleParticipant ;
} ,[])"><pre class="notranslate">  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">audioTrack</span><span class="pl-kos">,</span> <span class="pl-s1">setAudioTrack</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">savedSelectedAudioTrack</span><span class="pl-kos">,</span> <span class="pl-s1">setSavedSelectedAudioTrack</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">audioContext</span><span class="pl-kos">,</span> <span class="pl-s1">setAudioContext</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// use useEffect to run once</span>
<span class="pl-en">useEffect</span><span class="pl-kos">(</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span><span class="pl-kos">{</span>
<span class="pl-k">const</span> <span class="pl-en">handleParticipant</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">participant</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

          <span class="pl-k">const</span> <span class="pl-s1">availableTracks</span> <span class="pl-c1">=</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">from</span><span class="pl-kos">(</span>
            <span class="pl-s1">participant</span><span class="pl-kos">.</span><span class="pl-c1">tracks</span><span class="pl-kos">.</span><span class="pl-en">values</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
          <span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span>
            <span class="pl-kos">(</span><span class="pl-s1">publication</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">publication</span><span class="pl-kos">.</span><span class="pl-c1">isSubscribed</span><span class="pl-kos">,</span>
          <span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span>
            <span class="pl-kos">(</span><span class="pl-s1">publication</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">publication</span><span class="pl-kos">.</span><span class="pl-c1">track</span><span class="pl-kos">,</span>
          <span class="pl-kos">)</span><span class="pl-kos">;</span>

          <span class="pl-k">const</span> <span class="pl-s1">audioTracks</span> <span class="pl-c1">=</span> <span class="pl-s1">availableTracks</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span>
            <span class="pl-kos">(</span><span class="pl-s1">track</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">track</span><span class="pl-kos">.</span><span class="pl-c1">kind</span> <span class="pl-c1">===</span> <span class="pl-s">'audio'</span><span class="pl-kos">,</span>
          <span class="pl-kos">)</span><span class="pl-kos">;</span>
          
          <span class="pl-k">const</span> <span class="pl-s1">selectedAudioTrack</span> <span class="pl-c1">=</span>
            <span class="pl-s1">audioTracks</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">===</span> <span class="pl-c1">0</span> ? <span class="pl-c1">null</span> : <span class="pl-s1">audioTracks</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

          <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">selectedAudioTrack</span> <span class="pl-c1">!==</span> <span class="pl-s1">savedSelectedAudioTrack</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">// here savedSelectedAudioTrack will not work</span>
            <span class="pl-s1">setSavedSelectedAudioTrack</span><span class="pl-kos">(</span><span class="pl-s1">selectedAudioTrack</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">audioContext</span><span class="pl-kos">)</span>
              <span class="pl-s1">setAudioTrack</span><span class="pl-kos">(</span>
                <span class="pl-c">// eslint-disable-next-line prettier/prettier</span>
                <span class="pl-s1">audioContext</span><span class="pl-kos">.</span><span class="pl-en">MediaStreamAudioSourceNode</span><span class="pl-kos">(</span><span class="pl-s1">selectedAudioTrack</span><span class="pl-kos">)</span>
              <span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-k">else</span> <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">handleParticipant</span><span class="pl-kos">(</span><span class="pl-s1">participant</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">100</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

            <span class="pl-c">// setSelectedAudioTrack(selectedAudioTrack1);</span>
            <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">hasAudioTrack</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
          <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
            <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">hasAudioTrack</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
          <span class="pl-kos">}</span>


          <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span>
            <span class="pl-s">'audioTracks.length:'</span><span class="pl-kos">,</span>
            <span class="pl-s1">audioTracks</span><span class="pl-kos">.</span><span class="pl-c1">length</span>
          <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>


  <span class="pl-c">// create audiocontext and 3rd parity library and add event handler to 3rd parity library</span>
 <span class="pl-s1">setAudioContext</span><span class="pl-kos">(</span><span class="pl-s1">createdAudioContext</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
 <span class="pl-c1">3</span><span class="pl-kos"></span><span class="pl-s1">rdParityLibrary</span><span class="pl-kos">.</span><span class="pl-c1">handleEvent</span><span class="pl-c1">=</span><span class="pl-en">handleParticipant</span> <span class="pl-kos">;</span>
<span class="pl-kos">}</span> <span class="pl-kos">,</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">but the working implementation is like</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
  const [audioTrack, setAudioTrack] = useState(null);
  const [savedSelectedAudioTrack, setSavedSelectedAudioTrack] = useState(null);
  const [audioContext, setAudioContext] = useState(null);

// use useEffect to run once
useEffect( () =&gt;{
const handleParticipant = (participant) =&gt; {

      setSavedSelectedAudioTrack((savedSelectedAudioTrack) =&gt; {
        setAudioContext((audioContext) =&gt; {

          const availableTracks = Array.from(
            participant.tracks.values()
          ).filter(
            (publication) =&gt; publication.isSubscribed,
          ).map(
            (publication) =&gt; publication.track,
          );

          const audioTracks = availableTracks.filter(
            (track) =&gt; track.kind === 'audio',
          );
          
          const selectedAudioTrack =
            audioTracks.length === 0 ? null : audioTracks[0];

          if (selectedAudioTrack !== savedSelectedAudioTrack) { // here savedSelectedAudioTrack will not work
            setSavedSelectedAudioTrack(selectedAudioTrack);
            if (audioContext) // and audio context also will not work
              setAudioTrack(
                // eslint-disable-next-line prettier/prettier
                audioContext.MediaStreamAudioSourceNode(selectedAudioTrack)
              );
            else setTimeout(() =&gt; handleParticipant(participant), 100);

            // setSelectedAudioTrack(selectedAudioTrack1);
            window.hasAudioTrack = true;
          } else {
            window.hasAudioTrack = false;
          }


          console.log(
            'audioTracks.length:',
            audioTracks.length
          );
          
          
          return audioContext;
        });
        return savedSelectedAudioTrack;
      });
  };


  // create audiocontext and 3rd parity library and add event handler to 3rd parity library
 setAudioContext(createdAudioContext);
 3rdParityLibrary.handleEvent=handleParticipant ;
} ,[])"><pre class="notranslate">  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">audioTrack</span><span class="pl-kos">,</span> <span class="pl-s1">setAudioTrack</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">savedSelectedAudioTrack</span><span class="pl-kos">,</span> <span class="pl-s1">setSavedSelectedAudioTrack</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">audioContext</span><span class="pl-kos">,</span> <span class="pl-s1">setAudioContext</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// use useEffect to run once</span>
<span class="pl-en">useEffect</span><span class="pl-kos">(</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span><span class="pl-kos">{</span>
<span class="pl-k">const</span> <span class="pl-en">handleParticipant</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">participant</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

      <span class="pl-s1">setSavedSelectedAudioTrack</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">savedSelectedAudioTrack</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-s1">setAudioContext</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">audioContext</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

          <span class="pl-k">const</span> <span class="pl-s1">availableTracks</span> <span class="pl-c1">=</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">from</span><span class="pl-kos">(</span>
            <span class="pl-s1">participant</span><span class="pl-kos">.</span><span class="pl-c1">tracks</span><span class="pl-kos">.</span><span class="pl-en">values</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
          <span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span>
            <span class="pl-kos">(</span><span class="pl-s1">publication</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">publication</span><span class="pl-kos">.</span><span class="pl-c1">isSubscribed</span><span class="pl-kos">,</span>
          <span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span>
            <span class="pl-kos">(</span><span class="pl-s1">publication</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">publication</span><span class="pl-kos">.</span><span class="pl-c1">track</span><span class="pl-kos">,</span>
          <span class="pl-kos">)</span><span class="pl-kos">;</span>

          <span class="pl-k">const</span> <span class="pl-s1">audioTracks</span> <span class="pl-c1">=</span> <span class="pl-s1">availableTracks</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span>
            <span class="pl-kos">(</span><span class="pl-s1">track</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">track</span><span class="pl-kos">.</span><span class="pl-c1">kind</span> <span class="pl-c1">===</span> <span class="pl-s">'audio'</span><span class="pl-kos">,</span>
          <span class="pl-kos">)</span><span class="pl-kos">;</span>
          
          <span class="pl-k">const</span> <span class="pl-s1">selectedAudioTrack</span> <span class="pl-c1">=</span>
            <span class="pl-s1">audioTracks</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">===</span> <span class="pl-c1">0</span> ? <span class="pl-c1">null</span> : <span class="pl-s1">audioTracks</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

          <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">selectedAudioTrack</span> <span class="pl-c1">!==</span> <span class="pl-s1">savedSelectedAudioTrack</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">// here savedSelectedAudioTrack will not work</span>
            <span class="pl-s1">setSavedSelectedAudioTrack</span><span class="pl-kos">(</span><span class="pl-s1">selectedAudioTrack</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">audioContext</span><span class="pl-kos">)</span> <span class="pl-c">// and audio context also will not work</span>
              <span class="pl-s1">setAudioTrack</span><span class="pl-kos">(</span>
                <span class="pl-c">// eslint-disable-next-line prettier/prettier</span>
                <span class="pl-s1">audioContext</span><span class="pl-kos">.</span><span class="pl-en">MediaStreamAudioSourceNode</span><span class="pl-kos">(</span><span class="pl-s1">selectedAudioTrack</span><span class="pl-kos">)</span>
              <span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-k">else</span> <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">handleParticipant</span><span class="pl-kos">(</span><span class="pl-s1">participant</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">100</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

            <span class="pl-c">// setSelectedAudioTrack(selectedAudioTrack1);</span>
            <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">hasAudioTrack</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
          <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
            <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">hasAudioTrack</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
          <span class="pl-kos">}</span>


          <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span>
            <span class="pl-s">'audioTracks.length:'</span><span class="pl-kos">,</span>
            <span class="pl-s1">audioTracks</span><span class="pl-kos">.</span><span class="pl-c1">length</span>
          <span class="pl-kos">)</span><span class="pl-kos">;</span>
          
          
          <span class="pl-k">return</span> <span class="pl-s1">audioContext</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-k">return</span> <span class="pl-s1">savedSelectedAudioTrack</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>


  <span class="pl-c">// create audiocontext and 3rd parity library and add event handler to 3rd parity library</span>
 <span class="pl-s1">setAudioContext</span><span class="pl-kos">(</span><span class="pl-s1">createdAudioContext</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
 <span class="pl-c1">3</span><span class="pl-kos"></span><span class="pl-s1">rdParityLibrary</span><span class="pl-kos">.</span><span class="pl-c1">handleEvent</span><span class="pl-c1">=</span><span class="pl-en">handleParticipant</span> <span class="pl-kos">;</span>
<span class="pl-kos">}</span> <span class="pl-kos">,</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">i wish there was  a synchronous getState.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
  const [audioTrack, setAudioTrack] = useState(null);
  const [savedSelectedAudioTrack, setSavedSelectedAudioTrack, getSavedSelectedAudioTrack] = useState(null);
  const [audioContext, setAudioContext, getAudioContext] = useState(null);

// use useEffect to run once
useEffect( () =&gt;{
const handleParticipant = (participant) =&gt; {

          const availableTracks = Array.from(
            participant.tracks.values()
          ).filter(
            (publication) =&gt; publication.isSubscribed,
          ).map(
            (publication) =&gt; publication.track,
          );

          const audioTracks = availableTracks.filter(
            (track) =&gt; track.kind === 'audio',
          );
          
          const selectedAudioTrack =
            audioTracks.length === 0 ? null : audioTracks[0];

          if (selectedAudioTrack !== getSavedSelectedAudioTrack()) { // here savedSelectedAudioTrack will not work
            setSavedSelectedAudioTrack(selectedAudioTrack);
            if (getAudioContext())
              setAudioTrack(
                getAudioContext().MediaStreamAudioSourceNode(selectedAudioTrack)
              );
            else setTimeout(() =&gt; handleParticipant(participant), 100);

            // setSelectedAudioTrack(selectedAudioTrack1);
            window.hasAudioTrack = true;
          } else {
            window.hasAudioTrack = false;
          }


          console.log(
            'audioTracks.length:',
            audioTracks.length
          );
  };


  // create audiocontext and 3rd parity library and add event handler to 3rd parity library
 setAudioContext(createdAudioContext);
 3rdParityLibrary.handleEvent=handleParticipant ;
} ,[])"><pre class="notranslate">  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">audioTrack</span><span class="pl-kos">,</span> <span class="pl-s1">setAudioTrack</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">savedSelectedAudioTrack</span><span class="pl-kos">,</span> <span class="pl-s1">setSavedSelectedAudioTrack</span><span class="pl-kos">,</span> <span class="pl-s1">getSavedSelectedAudioTrack</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">audioContext</span><span class="pl-kos">,</span> <span class="pl-s1">setAudioContext</span><span class="pl-kos">,</span> <span class="pl-s1">getAudioContext</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// use useEffect to run once</span>
<span class="pl-en">useEffect</span><span class="pl-kos">(</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span><span class="pl-kos">{</span>
<span class="pl-k">const</span> <span class="pl-en">handleParticipant</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">participant</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

          <span class="pl-k">const</span> <span class="pl-s1">availableTracks</span> <span class="pl-c1">=</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">from</span><span class="pl-kos">(</span>
            <span class="pl-s1">participant</span><span class="pl-kos">.</span><span class="pl-c1">tracks</span><span class="pl-kos">.</span><span class="pl-en">values</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
          <span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span>
            <span class="pl-kos">(</span><span class="pl-s1">publication</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">publication</span><span class="pl-kos">.</span><span class="pl-c1">isSubscribed</span><span class="pl-kos">,</span>
          <span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span>
            <span class="pl-kos">(</span><span class="pl-s1">publication</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">publication</span><span class="pl-kos">.</span><span class="pl-c1">track</span><span class="pl-kos">,</span>
          <span class="pl-kos">)</span><span class="pl-kos">;</span>

          <span class="pl-k">const</span> <span class="pl-s1">audioTracks</span> <span class="pl-c1">=</span> <span class="pl-s1">availableTracks</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span>
            <span class="pl-kos">(</span><span class="pl-s1">track</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">track</span><span class="pl-kos">.</span><span class="pl-c1">kind</span> <span class="pl-c1">===</span> <span class="pl-s">'audio'</span><span class="pl-kos">,</span>
          <span class="pl-kos">)</span><span class="pl-kos">;</span>
          
          <span class="pl-k">const</span> <span class="pl-s1">selectedAudioTrack</span> <span class="pl-c1">=</span>
            <span class="pl-s1">audioTracks</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">===</span> <span class="pl-c1">0</span> ? <span class="pl-c1">null</span> : <span class="pl-s1">audioTracks</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

          <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">selectedAudioTrack</span> <span class="pl-c1">!==</span> <span class="pl-s1">getSavedSelectedAudioTrack</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">// here savedSelectedAudioTrack will not work</span>
            <span class="pl-s1">setSavedSelectedAudioTrack</span><span class="pl-kos">(</span><span class="pl-s1">selectedAudioTrack</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">getAudioContext</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
              <span class="pl-s1">setAudioTrack</span><span class="pl-kos">(</span>
                <span class="pl-s1">getAudioContext</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">MediaStreamAudioSourceNode</span><span class="pl-kos">(</span><span class="pl-s1">selectedAudioTrack</span><span class="pl-kos">)</span>
              <span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-k">else</span> <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">handleParticipant</span><span class="pl-kos">(</span><span class="pl-s1">participant</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">100</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

            <span class="pl-c">// setSelectedAudioTrack(selectedAudioTrack1);</span>
            <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">hasAudioTrack</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
          <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
            <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">hasAudioTrack</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
          <span class="pl-kos">}</span>


          <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span>
            <span class="pl-s">'audioTracks.length:'</span><span class="pl-kos">,</span>
            <span class="pl-s1">audioTracks</span><span class="pl-kos">.</span><span class="pl-c1">length</span>
          <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>


  <span class="pl-c">// create audiocontext and 3rd parity library and add event handler to 3rd parity library</span>
 <span class="pl-s1">setAudioContext</span><span class="pl-kos">(</span><span class="pl-s1">createdAudioContext</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
 <span class="pl-c1">3</span><span class="pl-kos"></span><span class="pl-s1">rdParityLibrary</span><span class="pl-kos">.</span><span class="pl-c1">handleEvent</span><span class="pl-c1">=</span><span class="pl-en">handleParticipant</span> <span class="pl-kos">;</span>
<span class="pl-kos">}</span> <span class="pl-kos">,</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span></pre></div>