Express.js Tutorial

ReactJS Introduction React Environment Setup ReactJS versions React JSX ReactJS Components Pros and Cons of ReactJS ReactJS features ReactJS vs Vue ReactJS vs AngularJS ReactJS vs React Native React State React Props React Props Validation React State vs Props React Component API React Component life-cycle React Controlled vs Uncontrolled components React Constructor React Forms React Events React Conditional Rendering React Lists React Keys React Refs React Fragments React Router React CSS React Bootstrap React Animation React Table React Map React Higher Order components React Code-Splitting React Hooks React Context React Flux React Flux vs MVC React Redux React Portals React Error Boundaries MaterialApp class in Flutter ReactJS | Calculator App (Introduction) ReactJS Calculator App - Structure ReactJS Calculator App (Building UI) ReactJS Calculator App (Styling)

Difference Between State and Props in React
2019-12-08 11:59:19

Difference Between State and Props in React

Comparison between State and Props

State

The state is an updatable structure which is used for containing data or information about the component. The state in a component can be changed over time. This change in the state over time happens as a response to user action or system events. The components with the state are called Stateful components. It is a crucial part of the React component that determines the component's behavior and how it will render. They are also responsible for making a component interactive and dynamic.

Props

A prop is an abbreviation of ‘properties.' State and props are mainly different from each other because props are immutable. Props are the read-only components. It is an object which stores the attribute value of a tag, and its work is similar to the HTML elements. It helps to pass the data from one component to another component. Props are like function arguments, as props are similarly passed to the component as arguments passed in the function.

We cannot modify the props inside the component. We can add attributes called props inside the components. These attributes are available in the component as this.props and use for rendering the dynamic data in our render method.

Difference between State and Props

S.no. Props State
1 Immutable. Mutable.
2 The child component can access them.    The child component cannot access it.
3 They are read-only. State changes are asynchronous.
4 They allow you to pass the data from one component to other components as an argument. It holds information about components.
5 The stateless component can have props. Stateless components cannot have props.
6 Props make components reusable. The state cannot make components reusable.
7 Props are external. The State is internal. It is controlled by the component itself.

The table given below tells us about the changing in props and state.

S.no. Conditions Props State
1 Can you get initial value from the parent component? Yes Yes
2 Can inside component change? No Yes
3 Can set default values inside component? Yes Yes
4 Can the parent component change it? Yes No
5 Can you set initial values for child components? Yes Yes
6 Can change in child components? Yes No

Similarities between Props and React

Props and React also have some similarities that are as follows:

  • Both are read-only when using this.
  • Both can have default values.
  • Both are the objects of plain JS.