I have a doubt regarding dynamically rendering the logged in user’s name in the NavBar in react.
So my app is structured in the following way
<App>
<Header/>
<Router>
....
<Router/>
<Footer/>
<App/>
Now inside the header component, I need to display “Welcome <user>” whenever the user is logged in. Here are some solutions that I thought of,but Not sure if I’m missing out on anything.
- To send it as a prop to the header. But it can only be dynamic if I do a setState in the App component and re render the entire app component (Which I want to avoid)
- To store it in redux, so header can dynamically get the updated. But since I am using JWT, and the user needs to stay logged in, If the user refreshes the page, store content will be wiped out.
- I can store the username in localstorage as well, but the entire app would still need to be re rendered in order to display the change
-) I think it can be accomplished in Angular by BehaviorSubject, but in this scenario, I’m clueless.
Is there any solution or method that I am missing?
Thanks in advance