What is the difference between props and state in React.JS?

In React, the developers build basic components and then use those basic components to build larger components, leading to a complete web page. While building these components, two important data manipulation methods are the state and props.

Both the props and the state decide what data the component will display. They are simple Javascript objects that will re-render the component every time they change.

Initially, both the props and the state can have default values or receive values from a parent component.

State

The state is a set of variables that determine the current condition of the component. The state of a component is internal, i.e., defined inside the component and changeable only within the component. Any change in state renders the component again.

In class-based components, the state of a component is defined as an object in its constructor, as shown in the code snippet below:

class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: "Educative_User"};
  }
}

In the above snippet of code, we add a property called name to the component’s state User. To change the state, we use the setState function.

In function-based components, the state of a component is defined using the useState hook, as shown in the snippet below:

function User() {
  const [name, setName] = useState("");

In the above snippet of code, we add a variable called name to the component’s state User. To change this specific variable, we can use the function setName.

Props

Props is short for properties. It is the set of attributes that are passed from a parent component to a child component. These can be data variables or functions.

Props are primarily used to communicate between parent and child components. Moreover, props cannot be altered inside the child component.

We pass the keyword props as a parameter to the function to access props in a function-based component.

In class-based components, we can access props using the this.props object. If we want to access props in the constructor of the class-based components, we first pass the props keyword into the constructor as a parameter and then call the super function by passing props as a parameter.

Consider the following snippet of code. It creates a function-based component that accepts props:

function GreetUser(props) {
  return <h2>Welcome to Educative, {props.name}</h2>;
}

If we wish to create a class-based component, we can do so as shown in the following snippet of code:

class GreetUser extends React.Component {
  constructor(props){
    super(props)  
  }

  render(){
    return(
      <h2>Welcome to Educative, {this.props.name}</h2>;
    )
  }
}

Now, consider the following snippet of code that creates a parent component. This parent component uses the GreetUser component:.

function ParentComponent() {
  return (
    <div>
      <GreetUser name="John" />
    </div>
  );
}

The parent component passes the prop name to the GreetUser component in the above snippets of code. The GreetUser component reads the value of the prop and displays it.