My Take on Local States in React

“Local state in React allows you to instantiate a plain JavaScript object for a component and hold information that might affect its rendering.” This is an important concept in React, as one of React’s biggest benefits as a framework for programming is the ability to make user interfaces more easily, specifically with components. Components can contain states, that become useful when they get instantiated and implemented within a component.

A state is always an object {} and has key-value pairs key: value., looking like state = { key: value }. The state is then used in the render() function of the component as state, or for a child component, as props. Utilizing state, programmers can write comprehensive code to add efficiency to their code when making a product.

The object stored in state, as mentioned above, is a plain JavaScript object made for the component that hosts the state, that can effect children as well. In the render() function, keys are used to access the values held in state to manipulate the document object model. In certain cases, when handled inaccurately, the asynchronous nature of changing state with setState(), can cause errand results by expecting the state to update, before it does, and can most often be caught by adding some code to check it in the console.

Finally, when using props, “React’s key prop gives you the ability to control component instances.” Adding a key, like key= when passing in props to a component with state in a call-up to utilize in the component one is working in, will give the programmer the ability to track that component. This is especially useful when making lists, as programmers will be able to track the component, rather than having to look them up by index. Plus, without it, React may give you warnings, or even errors, so read up on keys here: https://kentcdodds.com/blog/understanding-reacts-key-prop

I personally have really enjoyed using states and props, as there is logical functionality incorporated into their functionality. While having stateless components is preferred, situations do arise where using states and props make a lot of sense, and can be a joy to work with, as they carry out their functionality excellently.