React: State vs Props

What started out in 2013 as a small effort by a team at Facebook (now Meta) to simplify the process of building performant web applications, slowly but surely has morphed into one of the most used web technologies on the planet today and has even gone beyond the web into adjacent fields like Mobile Development with React Native e.t.c.

Not only did React improve the way we write code for the web, it also gave us a new way to think about structuring web sites and apps: Components. This paradigm has gone on to influence almost every other web framework/library in existence today. Everybody has adopted the Component paradigm.

Despite it's widespread adoption, React is still a technology with it's rules and quirks which, if not properly understood, could lead to some very funny errors A.K.A Gotchas.

So in this series, we'll be exploring some of the most common Gotchas. Starting with the most basic Gotcha: The difference between Props and State in React and when to use which. This will be the focus of this post.

DISCLAIMER: This blog post assumes you already have some experience working with React. If you don't, check out this resource before proceeding with the rest of the post.

Alright, let's dive in !

---

Let's consider a hypothetical scenario:

We're building an app to keep track of the number of cars we see on the road. The app comprises of only two U.I elements: A button and a text element. When the button is clicked, the number in the text element increases by one. The code for such an app would look something like this:

import React, { useState } from 'react';

export function App() {

  return (
    <div className='App'>
      <Counter buttonText="Increment"/>
    </div>
  );
}

export function Counter(props) {
  const [count, setCount] = useState(0);

  const increment = () => setCount((count) => count + 1);

  return (
    <>
      <h1>{count}</h1>
      <button onClick={increment}>{ props.buttonText }</button>
    </>
  )

}

---

State

So, what do we mean by State in React ?

In React, the State of a component refers to the data held or stored within that component which it can manipulate or adjust in order to change it's appearance on the screen. i.e Data owned and manipulated by the component.

---

Props

If the State of a component is data held by that component, then:

Props are data passed into a component from outside, usually from a parent component, which is aimed at adjusting the characteristics of the component. i.e Data given to a component to make it behave or appear a certain way.

In this case, it's very clear that Props are not supposed to be modified by the component which receives them. They're in fact read-only and should not be modified.

---

In a Nutshell

The State of a component refers to data stored and controlled by that component which affects it's behavior or appearance while it's Props are the data passed into it in order to modify it's behavior or appearance.

The critical difference lies in the fact that while the State of a component is controlled by that component, the Props passed into it are not under it's control.

---

When to use which ?

Use Props when:

• You want to pass data from a parent to a child component.
• The data is read-only for the child (the child doesn’t change it).

From our example, we see that Counter relies on a buttonText prop passed into it from the parent App component and uses that to modify the label on it's child button element. This is a good use of Props.

Use State when:

• The data needs to change over time inside the component.
• The component should re-render when that data changes.

From our example above, we notice that our Counter component maintains a count state which is updated whenever the button is clicked. The Counter component has full control of count and can modify it however it wants hence the need to represent it as a State.

---

I hope this helps. Thanks for reading.