A closer look at state and components in React

Obviously, state is a crucial concept in React. Ultimately, everything comes down to state when it comes to re-rendering components and changing what's on the screen. So therefore components and their interaction with state, is really a core aspect of React. And it is worth noting that both, of course, are managed by React. This components concept comes from the React library, and React also takes care of your state that is attached to components. It takes care, for example, by using the useState hook, and that's how this interaction between components ans state is handled.

Speaking of that, one of the most common forms of managing state is to use the useState hook. With that, you create a new piece of state, you could say, and you automatically attach it to a component, the component in which you call useState. This attachment, kind of, is done behind the scenes by React. Because when you call useState, React behind the scenes creates a new state variable, you could say, which React manages for you, and which React also for you ties to this component. It's strange that even though we call useState every time our component function runs again, we don't seem to lose or reinitialize our state all the time. The reason for that is simple: useState is coming from React, and I just said that React is managing the state and the connection to the component for you and as part of that management process, React makes sure that useState and the value you pass as a default value to useState essentially is only considered once.

The first time ever a component is rendered, so the very first time our component runs, useState, when executed, creates a new state variable which is handled off to React and which is managed by React. React then basically memorizes to which component that belongs and it uses the default value to initialize the state with that value. For subsequent component function calls, so for reevaluations of the app component, when useState is being called, no new state is being created. Instead, React recognizes that it already has a state for this component and it instead simply updates that state as needed because the app function reran because some state changed most likely, and therefore React will only do that state management and updating. It will never reinitialize the state unless the component was totally removed from the DOM in the meantime (in case of the app component this will nevet happen since it's our root component)

For child components, if it's rendered conditionally, for example, a component might be removed, and in that case, if it's then later reattached, a new state would be initialized. But as long as a component stays attached to the DOM, state is only updated after that first initialization and that's one important note to take and of course the same is true for useReducer, for example.