Understanding what state and props are, and the differences between them is a big step towards learning React. In this article, we will know the concepts of state and props, and will clarify some most asked questions about them. How do you update a component’s state?

1. What are props?
2. How do we pass data with props?
3. What is state?
4. How do we use and update a component’s state?
5. What happens when state changes?
6. What are the differences between props and state?

Props are short for properties and they are used to pass data between React components. React’s data flow between components is uni-directional (from parent to child only).

Here is an example of how data can be passed by using props:

import React from 'react';

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

export default Greeting;

In this example, the Greeting component receives a name prop and displays it in an H1 element. The component can be used in another component as follows:

import React from 'react';
import Greeting from './Greeting';

const App = () => {
  return <Greeting name="Dev" />;
};

export default App;

React has another special built-in object called state, which allows components to create and manage their own data. So unlike props, components cannot pass data with state, but they can create and manage it internally.

Here is an example showing how to use state:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
};

export default Counter;

In this example, the Counter component keeps track of a count in its state, using the useState hook. The state is initialized with a value of 0. The component displays the count and a button that, when clicked, increments the count by calling setCount with the new value.

A change in the state happens based on user input, triggering an event, and so on. Also, React components (with the state) are rendered based on the data in the state. The state holds the initial information.

So when the state changes, React gets informed and immediately re-renders the DOM – not the whole DOM, but only the component with the updated state. This is one of the reasons why React is fast.

So how does React get notified? The setState( ) method triggers the re-rendering process for the updated parts. React gets informed, knows which part(s) to change, and does it quickly without re-rendering the whole DOM.

In summary, there are 2 important points we need to pay attention to when using state:

• State shouldn’t be modified directly – the setState( ) should be used
• State affects the performance of your app, and therefore it shouldn’t be used unnecessarily

• Components receive data from outside with props, whereas they can create and manage their own data with the state.
• Props are used to pass data, whereas the state is for managing data.
• Data from props is read-only, and cannot be modified by a component that is receiving it from outside.
• State data can be modified by its own component, but is private (cannot be accessed from outside).
• Props can only be passed from parent component to child (unidirectional flow).
• Modifying the state should happen with the setState() method.

That's it for today. I hope you've enjoyed this tutorial. Thanks for reading. 🙂