ReactJS Fundamental — Props & State Simplified

One of the awesome features of React is the ability to manage your data and properly re-render your application when your data changes. Props and State are CORE concepts of React in regards to when you are thinking about data. Likewise, it can be a bit confusing regarding when to make use of Props and State.

Changes in props and/or state trigger React to re-render your components and potentially update the DOM in the browser

Props

Props allow you to pass data from a parent (wrapping) component to a child (embedded) component. simply put, they are like an argument to a function

Props are useful when displaying a piece of information inside a component without hard coding it, i.e. it is a variable to a function

Let's have a look at the example below

AllMenu Component

//AllMenu Component
const allMenu = () => {
    return (
        <div>
            <Menu item="Salad" />
        </div>
    );
}

In the code snippet above, item is the custom property (prop ) set up on the custom Menucomponent. We basically replicate the default HTML attribute behavior we already know (e.g. <input type="text"> informs the browser about how to handle that input).

Menu Component

//Menu Component
const menu = (props) => {
    return (
        <div>
            <h2>{props.item}</h2>
        </div>
    );
}

The Menu component receives the props argument. You can of course name this argument whatever you want - it's your function definition, React doesn't care! But React will pass one argument to your component function => An object, which contains all properties you set up on <Menu ... /> . {props.item} then dynamically outputs the item property of the props object - which is available since we set the item property inside AllMenucomponent (see above).

State

Whilst props allow you to pass data down the component tree (and hence trigger a UI update), State is used to change the component from within.

Changes to state also trigger a UI update

class NewMenu extends Component { 
// state can only be accessed in this form in class-based components!
    state = {
        item: 1
    };  
 
    render () { 
// Needs to be implemented in class-based components! Needs to return some JSX!
        return (
            <div>{this.state.item}</div>
        );
    }
}

Above, the NewMenu component contains state . Only class-based components can define and use state . You can, of course, pass the state down to functional components, but these can't directly edit it.

state simply is a property of the component class, you have to call it state,the name is not optional. You can then access it via this.state in your class JSX code (which you return in the required render() method).

Whenever state changes, the component will re-render that section of your application and reflect the new state. For props, if there is a need for a change, it has to be done outside the component, most likely it will be a state stored somewhere else in your application that is been passed down as props.

State comes handy when you need to re-render or update your application based on some changes or something the user has done, so if you want to change something in your application, you need to store them in the state so they can properly re-render when there are changes.

If you have various form element like the input field, checkbox and the likes that need to be updated by the user, State does a good job in capturing what value is coming in and what value is been updated.

The big difference between Props and State is that you can pass Props into a component, it is handled outside of a component and must be updated outside of the component but State is handled inside of the component

One of the major challenges faced out there in choosing when to use State or Props is caused due to the fact that proper thought is not giving to what data is going to be handled by the component. If you are handling the data inside the component only and nowhere outside of it, like in the parent above, then make use of the State. If you are handling the data outside the component, then you need to pass it in via a props

If your information is static and never going to change then you need a Props, like we said earlier props are for things that are going to be passed down from the parent and don't change inside the component

In conclusion, those are the major difference between state and props, if you have other beneficial opinions, simply hit the comment below.

If you found this article helpful, share/retweet it and follow me on twitter @infinitypaul