Differences between Props and State in React

Recently, I’ve been exploring React, and during my research, I’ve come across the use of Props and State quite frequently. So, what are they and how do they differ? Let’s delve into that in this article!

1. What are Props?

Props is short for properties. In React, it refers to an object that stores the values of attributes within a component. Components can receive values of attributes passed from outside, and this is how components communicate with each other.

Example:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="ReactJS" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

In the above example, the line <Welcome name="ReactJS" /> creates a Welcome component with an attribute named name and a value of ReactJS. Above it, we have a function component that returns Hello, {props.name}. Here, {props.name} will have the value passed into the Welcome component, which is ReactJS. Finally, upon rendering, it will produce the output: Hello, ReactJS. It’s somewhat akin to calling a function in JavaScript, isn’t it? 😄

Props can be modified using functions like setProps or replaceProps, but this is not encouraged by React (Props are Read-Only)

2. What is State?

Similar to props, state also holds information about a component, but it stores dynamic data specific to a component.

State is dynamic data; when its value changes, the component gets re-rendered.

State is only accessible within the component it belongs to. This means you cannot directly access the state of component A from component B. Instead, you would need to use props to pass the state’s value from component A to B.

Let’s consider the following example:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

This code works as follows:

• The component initializes with a state containing the current time.
• After the component is initialized and its state is set, componentDidMount runs, initializing an interval and assigning it to this.timerID.
• As the interval runs, the state is updated every second using the this.setState() method.
• When the state changes, a change event is triggered, and the render method updates the UI with the latest information.
• Before leaving the page, the componentWillUnmount() function runs and clears the interval.

3. Comparing Props and State

I hope this article helps you understand more about props and state. If there’s anything incorrect, feel free to provide feedback! 😄