What are Props and State in React?

React is a component-based JavaScript library that helps developers build user interfaces (UI) more easily with components, which are logically grouped "slices" of a UI.

Developing a deep understanding of props and state will demystify React in a lot of ways. It will help you use React Hooks more effectively. It will also help you write better and more reusable React components.

What is a React Component?

React components are functions that return JSX (JavaScript Syntax Extension) or in other words, HTML. This ends up being HTML most of the time (e.g. <div>s and <span>s) but you can also render strings, numbers, or null if you want nothing to appear in the HTML document.

React components are reusable chunks of code. For example, let's say you have a navigation bar that consists of a <nav>, you can put it in a React component and render it wherever you want to show the user the navigation bar.

Understanding Props and State

• Props is an object passed to a React component from its parent component and state is any value that are initialized by the React component itself and can change over the lifetime of the component.

• Props are external (received from outside the component) while state is internal (it can't be directly manipulated by things outside the component).

React components are functions and props are the arguments that you provide for the function. The function will then do something with the arguments you provided. In the case of components that usually means rendering some HTML.

On the other hand, imagine state are the values you initialize inside the function. State can be modified with a function idiomatically called setState. When it's modified, the function will be called again (a re-render) with the new state value. This means state changes are persisted over time for that component's lifetime.

Let's talk about Props...

Props are inputs passed to a component's child and are read-only. Don't try to change props directly inside your components, they can only be changed within the parent component. If you find yourself wanting to do this, use state instead.

Below is an example of nested components, a parent component might have more than one child component. In this case, the parent component passes the prop `color` to the child component.

The child component can access the prop using the below syntax:

What's about State?

State is a value that you would want to change over a component's lifetime. Changes will trigger a re-render whenever its value changes. If you have state that never changes, then it doesn't need to be state.

To change the state of a component, you can use the setState() function returned by React.useState. setState() does not modify your state directly but rather tells React to call (re-render) the component with the new state.

🚨 Important Note

Props are immutable! A component cannot and should not modify its props. However, it can update its state and the props of its children. If you want to update the props of a component, the parent component has to pass a function to do so to the child component, in which the child component will call that function.

🌈 When to use Props and State?

• A component should use props to configure certain aspects of its behavior. For example, a component may accept an onClick prop which lets callers of the component customize what happens when the user clicks a button rendered by the component.

• A component should use state to store information that changes over time. If state never changes it should just be a variable, not state.

🌸 Summary

The difference between props and state will be more clear as you use them more and more in your applications, for now, you can focus on some main differences between them:

Conclusion

Understanding props and state might be confusing but hopefully this article will give you a better understanding of what they are and how they work.