React State & Props: An Overview

The goal of this article will be to provide a brief overview of two of React’s most unique aspects, state and props. State and props work together to facilitate the broad modularity and power offered by the React framework. Both state and props are plain JavaScript objects and hold information used to influence the rendered material displayed on the DOM. Despite both state and props being similar JS based objects they work in distinctly different ways.

PROPS:

Props, short for properties, allow for the programmer to pass values along to both class based and functional components. These values can be anything from static strings, objects or arrays all the way to functions. Props are very similar to function parameters in vanilla JS and can greatly enrich the functionality of components by passing vital information into them. Here is an example of passing props into a Component:

Another unique aspect of props is the use of default props. A default prop is a sort of back-up option for when information about a prop cannot be found or has not been provided. Say you have user inputted data and the user has failed to supply a portion of the information required to complete an object. Instead of crashing or returning an error the program will utilize the default prop in place of the expected information allowing the program to render something and continue running.

Remember that ComponentX here has the props title, imgSrcand genres. Default props are being created on line 17 withComponentX.defaultProps = {and currently offer a back-up prop for imgSrc. You can create as many default props as you need to cover your program’s bases and ensure you do not encounter any random crashes or inability to render information.

While props is great, it is easier to use props with static values and leave the handling of more dynamic information to state.

STATE:

State in React is data or values that are dynamic, meaning they can be changed or mutated, and are similar to variables declared within functions in vanilla JS. State can be created in class based components, passed as props to others and, unlike props, can be changed throughout the course of your Component’s lifetime. While it is possible to update values by passing props between parent and child components, it is exceedingly more complicated than state which allows us to maintain and update information within a single Component.

State is typically defined with this syntax:

Where constructor()establishes initial state for the class and super() within the constructor as we are inheriting state from another class via the extends functionality. It is also possible to call state less verbosely with a bit of syntax sugar if you do not need to use the functionality of the constructor or super methods.

These are examples of initial state, or the state that exists when the program is initialized. To mutate the state within a component and make full use of the power of state we must make use of the setState() operator. Let’s put what we know about state together to see it in action.

Say you have a simple number counter that you want to increment by a value of 1 every time a user clicks a specific target. We would first establish our initial state within our component to handle the integer value. Once we have established our initial state we would then create a function to handle the simple math and use setState() within the function to increment our value. The process could look something like this:

Here the class component, ComponentX, is created, initial state is established on lines 5–8 and a function is run addToValue employing the setState() method on line 16 to increment the value of state by one. The function is later called under return on line 24 attached to the event listener onClick method. In this example state is being managed through the function and maintained within the component. This state can be passed as a prop to other components within a program and be mutated through functional interaction outside of its home component.

Even though you can have state for any transformable aspect of your program you wish to manage, it is important to remember to keep your state as lean as possible and house it in the lowest common ancestor. This will save on resource load and help keep your programming light and easy to navigate.