React Props vs State

React Props vs State

What are Props? What is State? Should I use props or state? What impact do they have? What is the difference between props and state?

What are Props? What is State? Should I use props or state? What impact do they have? What is the difference between props and state?

Do you have these kinds of questions when you start working with React? Yes?

So let me tell you one thing, these are all relevant questions and clarity of these concepts will pay off in the long run while working with React

Let’s start with the basics!

What are props? 

  • Props are short for properties
  • Props allows us to pass custom data to React components

Example

<Button type="alert" name="Quit" disabled={true}/>

In the above example all the attributes i.e typenamedisabled are all props

Why Props are important?

React Applications are formed by composing different components.

There are 2 types of component

  • Props are short for properties
  • Props allows us to pass custom data to React components

    Huh, but what is State?

    State is a closure variable which is used for communication within a component Having said that, Stateful components manipulate this state using setState() to modify the behavior of a component

However, when this internal state is passed to other components using props it becomes a Stateless component

Example

// Stateless Component
const DisplayDetails = props => {
 return (
 <div>
   <h1> Props Usage </h1>
   <h3>
     My name is {props.firstName} {props.lastName}, I live in {props.city}.
     Nice to meet you!!{" "}
   </h3>
 </div>
 );
};

// Stateful Component
class Greet extends React.Component {
state = {
  name: ""
};

updateName = e => {
 if (e.key === "Enter" && e.target.value.trim().length != 0) {
 this.setState({
   name: e.target.value
 });
 }
};

render() {
 return (
   <div>
     <h1> State Usage </h1>
     {!this.state.name && (
       <div>
         <h3> What's your good name ?</h3>
         <input
           type="text"
           onKeyPress={this.updateName}
           placeholder="Once done press Enter"
         />
       </div>
     )}
     { this.state.name.trim().length != 0 && (
        <h3> Hola !!! My name is {this.state.name}</h3>
     )}
   </div>
  );
 }
}

const userDetails = {
 firstName: "Arwa",
 lastName: "Lokhandwala",
 city: "Mumbai"
};

ReactDOM.render(
 <div>
   <DisplayDetails {...userDetails} /> <hr />
   <Greet />
 </div>,
 document.getElementById("root")
);

In the above example, DisplayDetails is a Stateless Component which receives custom data through props firstName, lastName & city

Greet Component, however, is a Stateful Component as it uses React’s State to store the _name _captured by onKeyPress event and then access it from the state using _this.state.name _to greet the user

So looking at the above example we can fairly conclude that,

State is a closure variable which is used for communication within a component> State is a closure variable which is used for communication within a component## So then, What is the difference between State & Props ?

Props are immutable, while State is observable

  • Props are short for properties
  • Props allows us to pass custom data to React components

    State can only be used in Class Components, Props have no such limitation

  • Props are short for properties
  • Props allows us to pass custom data to React components

    Props are set by the parent component while State is generally updated by event handlers

  • Props are short for properties
  • Props allows us to pass custom data to React components

    Conclusion

Understanding everything above is a lot to grasp, hence let me help you with a few gotchas which you can quickly refer to

  • Props are short for properties
  • Props allows us to pass custom data to React components

Thanks for reading ❤

If you liked this post, share it with all of your programming buddies!

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

ReactJS vs Angular vs Vue: Best Javascript Framework For Your Project

ReactJS vs Angular vs Vue: Best Javascript Framework For Your Project. This video covers the key differences between ReactJS, Angular and Vue with respect to the following: Use case, Performance, Data binding, Scripting language, Testing, Community support, Growth curve

What is JavaScript – All You Need To Know About JavaScript

In this article on what is JavaScript, we will learn the basic concepts of JavaScript.

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.