React didn’t become the most popular JavaScript library by chance. React has a number of unique features that make it a perfect choice for building interactive applications for the web. In this blog post, I want to talk about arguably two of the most integral features to building apps with React – state and props.

You will learn what state and props are and understand similarities and differences between them. We will also see how to pass data into components using props, and what are the shortcomings of using props to pass data down multiple levels. We will also learn about state and React’s rules when it comes to dealing with state values.

Props

As you know, React is founded on reusability of components. The idea is that you define component once, and define its overall structure. The you pass in different bits of data to ‘fill’ in the blanks, so the repeated parts of UI (let’s say cards for different products) have the same structure, but display different information. This way, you don’t have to write markup structure for every individual instance of that particular UI component. In simple words, props allow you to pass data into components, which are pre-defined bits of UI. Components use this data to fill in the blanks, and thus customize their content, appearance, or sometimes even their functionality.

The syntax for passing down props in JSX is quite similar to element attributes in HTML. You can even think of props as custom attributes for React elements. Except unlike in HTML, the individual components have much more control and can do a lot more with the data that’s passed into them.

Let’s look at an example:

<Component text=”Hello World” />

In this case, parent component passed down a simple string via text prop. The child component’s definition can tap into its text prop and display it on the page. This may seem useless, but you can technically replace text with any other value and use it to customize contents of the component.

Let’s look at the child component definition and structure:

Function Component (props) {

Return (<p>{props.text}</p>)

}

As you can see, functional component accept props as an argument, and the text prop is passed down as an individual property of props object. We use curly braces to embed a JavaScript expression inside JSX, and access text property of the props object.

Thinking of props as arguments to the component can be an useful way to understand them. Like arguments, props are inputs into the component that can be helpful in getting the result we wont. And like functions, components save us from writing the same lines of code over and over again.

Many external libraries that provide ready-made components use props as a way to customize various aspects and even content of these components. For example, 'react-router', the main routing library for React, provides a custom <Navigate> component. It is often used with React forms to redirect users to another page when the form is submitted. Passing it a 'to' prop allows us to specify the URL to which users should be redirected.

An important feature of props is that they are uni-directional. Parent components can pass down props into the child components invoked within their JSX. Child components can only receive props, and can not modify or delete them. Uni-directional data flow is an extremely important feature that ensures consistency of data across multiple React components.

State

State is another very important feature of React. To explain it in simple words, state maintains the record of what’s going on in the app. Is the ‘dark mode’ toggle selected or not selected? What is current value in the input field? Should the component be expanded or collapsed? State keeps track of everything, and it is what makes it possible to implement these dynamic features.

State is especially important for handling user inputs. It is essential in onChange event handlers to handle changes in the text inputs in React.

State is an internal management tool, as opposed to props that deal with relationship between multiple components. However, data passed down via props often comes from the state.

Before React version 16, only class components could initialize the state. Functional components were relegated purely to presentational role. Since the introduction of hooks, that has changed, with functional components now being able to initialize state variables using the useState() hook.

If you’re a beginner, I personally recommend you work with functional components and variables created with useState hook. I recommend this because the hook keeps things simple – it returns two variables – one to hold the state value, and another to update it if necessary. You don’t have to deal with setState() method as you do in class components.

Unlike props, changing state is encouraged and even necessary. The entire purpose of state is to update values in response to user events, or other external events (like loading data from external API).

Importantly, changes to the state re-render lead the component to re-render itself and all of its children components. This behavior may seem extreme, but it’s necessary to make sure the app responds to latest changes. Plus, React uses Virtual DOM, so re-rendering all components is not a very expensive computation.

Differences between state and props

Let’s finally summarize most important distinctions between state and props.

• By design, state is meant to change according to most recent user interactions or other external events. Props can not be mutated by the child component that receives data via props.

• Props are external, state is internal data.

• Props are uni-directional, meaning that parent components can pass data down to their children using props. Children can not pass data back up. However, they can invoke event handlers passed down to them via props, and effectively update state values in the parent component.

• The only way to change props is to change it in the parent component that invokes the child component. The only way to change state is to use either setState() method or special function for updating a specific state variable.

State and props are without a doubt, two of the most important features to understand if you want to effectively build web applications with React. They underpin the entire React ecosystem.