go backBack to blog

What are Props and State in React?

Published on Apr 01 2022

Last updated on Apr 13 2022

Image by Max Baskakov

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.

React component example

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.

A common pattern is to use the state of one component as a prop to another component.

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.

React Component Example

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

How child component acesses props

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.

Updating state inside a parent component
🚨 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.

How to update props from inside the child component

🌈 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:

State Props
Usage Store data that changes over time Parent component uses this to configure the component
Can change? Yes Immutable, cannot be changed from the child component
Access use __state__ to read and __setState()__ to modify Read-only


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.

My portrait picture

Written by Alissa Nguyen

Alissa Nguyen is a software engineer with main focus is on building better software with latest technologies and frameworks such as Remix, React, and TailwindCSS. She is currently working on some side projects, exploring her hobbies, and living with her two kitties.

Learn more about me

If you found this article helpful.

You will love these ones as well.

  • Photo by Holly Stratton on Unsplash
    May 04 2023 — 5 min readWhat are Remix Stacks?
  • Photo by Tolga Ulkan
    Apr 04 2022 — 5 min readThe Lifecycle of A React Component

  • Built and designed by Alissa Nguyen a.k.a Tam Nguyen.

    Copyright © 2024 All Rights Reserved.