title: Is it possible to dynamically render return value of a function without using state?
body: <p>I am working on a chat application to learn Redux and have been having some difficulty in determining whether I need to use state to render the result of a db function call dynamically.</p>
  <p>The required functionality is to have the channel name appear in the header when a user selects one of the channel links in the sidebar. The images below demonstrate this functionality in action.</p>
  <p>In this image, no channel has been selected yet and so no channel name is visible in the header.</p>
  <p><a href="https://i.stack.imgur.com/UE7ms.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UE7ms.png" alt="" /></a></p>
  <p>In this image the user has selected general in the sidebar and so it is populated within the header dynamically.</p>
  <p><a href="https://i.stack.imgur.com/MFhJ8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MFhJ8.png" alt="" /></a></p>
  <p>I have managed to get the functionality I desire to work by using state via hooks and so am aware that I can easily port this over into Redux. My question is whether I needed to use state at all? Below is a CodeSandbox link which shows the app with the required functionality in place.</p>
  <ul>
  <li>CodeSandbox: <a href="https://codesandbox.io/s/condescending-solomon-0ro4e" rel="nofollow noreferrer">https://codesandbox.io/s/condescending-solomon-0ro4e</a></li>
  </ul>
  <p>Prior to using the hooks state, I was attempting to return the channel name from the <code>getChannelName</code> function like so:</p>
  <pre><code>    const getChannelName = () =&gt; {
          if (currentChannel) {
  
              console.log(currentChannel);
  
              const channel = firestore.collection(&quot;rooms&quot;).doc(currentChannel);
  
              channel.get().then((doc) =&gt; {
                  if (doc.exists) {
                      return doc.data().name;
                  } else {
                      console.log(&quot;No such document!&quot;);
                  }
              }).catch((error) =&gt; {
                  console.log(&quot;Error getting document:&quot;, error);
              });
          }
      }
  </code></pre>
  <p>I then made many different attemps to render the result from this function within my return statement, but all of my attempts led to the channel not being populated in the header. Following this I pushed it into state and of course it works right away. Is it possible to render the channel name in the header without storing the value in state?</p>
  <p>Thank you!</p>