Difference Between Props And State In React JS.

React.js is one of the most widely used JavaScript libraries that every front-end developer should know. Understanding what props and state are and the differences between them is a big step towards learning React.

1. What Are Props?

2. How Do You Pass Data with Props?

3. What Is State?

4. How Do You Update Component's State?

5. What Happens When State Changes?

6. Can I Use State In Every Component?

7. What Are The Differences In State And Props?

What Are Props?

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

How do you pass data with props?

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

class ParentComponent extends Component {    
    render() {    
        return (        
            <ChildComponent name="First Child" />    
        );  
    }
}
const ChildComponent = (props) => {    
    return <p>{props.name}</p>; 
};

Firstly, we need to define/get some data from the parent component and assign it to a child component’s Prop attribute.

<ChildComponent name="First Child" />

“Name” is a defined prop here and contains text data. Then we can pass data with props like we’re giving an argument to a function:

const ChildComponent = (props) => {  
  // statements
};

And finally, we use dot notation to access the prop data and render it:

return <p>{props.name}</p>;

What is the state?

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:

class Test extends React.Component {    
    constructor() {    
        this.state = {      
            id: 1,      
            name: "test"    
        };  
    }     
    render() {    
        return (      
            <div>        
              <p>{this.state.id}</p>        
              <p>{this.state.name}</p>      
            </div>    
        );  
    }
}

How do you update a component’s state?

The State should not be modified directly, but it can be modified with a special method called setState().

this.state.id = “2020”; // wrong
this.setState({         // correct  
    id: "2020"
});

What happens when the state changes?

OK, why must we use setState()? Why do we even need the state object itself? If you’re asking these questions, don't worry – you’ll understand state soon :) Let me answer.

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.

And how does React get notified? You guessed it: with setState( ). 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:

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

Can I use state in every component?

Another important question you might ask about the state is where exactly we can use it. In the early days, a state could only be used in class components, not in functional components.

That’s why functional components were also known as stateless components. However, after the introduction of React Hooks, a state can now be used both in class and functional components.

If your project is not using React Hooks, then you can only use state-in-class components.

What are the differences between props and state?

1. Components receive data from outside with props, whereas they can create and manage their own data with the state.

2. Props are used to pass data, whereas the state is for managing data.

3. Data from props is read-only, and cannot be modified by a component that is receiving it from outside.

4. State data can be modified by its own component, but is private (cannot be accessed from outside).

5. Props can only be passed from parent component to child. (unidirectional flow)

6. Modifying the state should happen with the setState ( ) methods.

Thank You For Reading!