Log no. 1 - State: A Component's Memory , Part 1

Log no. 1 - State: A Component's Memory, Part 1

Session 1: 30/1/2026

  • My mentor and I went to the react docs because I was stuck on a problem and he told me that I had to ground it in documentation
  • I was absolutely stunned and amazed by what I saw - how could something describe something I was struggling with so well?
  • So what did I learn:
  • As the result of a user interaction, components often need to change what is on the screen 
  • Components need to remember what the correct data is, so that even when they update (re-render) and the code runs again from top to bottom, the data is remembered 
  • This component-specific memory is called state 
  • A regular variable isn't enough to store state between re-renders of components 
Here, this little diagram that I made should sum it up really well: 

A diagram explaining how use state is used in react

  • Local variables don't persist between renders -> so we have to find a way to retain the data between renders -> so this is how we use the state variable part of the use state hook 
  • Changes to local variables don't trigger re-renders -> react doesn't realise it needs to render the component again with new data if it is not stored in state -> we need to trigger react to re-render the component with new data 
    • -> a state setter function will update the variable 
    • -> calling the state setter function will also cause react to render the component again

Comments

Post a Comment

Popular posts from this blog

Log no. 2 - State, A Component's Memory - Part 2

Image
Log no. 2 - State, A Component's Memory - Part 2 It is a learning day or "Spa Day" today and I am using it to make a big green dent (!) in my React docs reading list. So I am back to reading "State: A component's memory for now." Which explains state at a much deeper level So bro in a nutshell what have I learned or re-learned: The only argument that `useState` takes is the initial value of your new state variable  For example if you were doing an counter you would start with `useState(0)` (if you wanted to start at zero) every time a component renders, `useState` give you an array containing two values the state variable with the value you stored  the state setter function that can it can update the state variable  more importantly, it can TRIGGER A RE-RENDER THE SYNTAX is something like `const [something, setSomething] = useState(initialValue)` Okay so that was the first part. So I read some more and made a great big diagram useState in Action So I highly...
Read more