State and Props

Props & State :- There are two types of data that control a component: State and Props in react. Props are set by the parent and they are fixed throughout the lifetime of a component. State data that is going to change, we have to use state.

State :- Component state can be changed over time in response to user actions, API responses, and any other. We have a class based components by extending React. Component class to get state features. Define the state initial inside the constructor . State is using inside the component and state is a mutable and accessed via this.state()..

In other words, you can say , you can change the state inside the component.

When change the state then will re-render the component.

Props :- Props means Properties in React. It is read-only components which must be kept pure i.e. immutable. In other words, you can not change the value of props. It’s always passed down from the parent to the child components through out the application. A child component can never send a prop back to the parent component. This help in maintaining the unidirectional data flow and They are generally used to render the dynamically generated data that is know as Props.

 

Props Validation :-Property validation in React is a great tool that can help developers enormously to hunt down bugs. Besides being a great way of defining the component’s interface, propTypes makes it immediately clear when the source of a problem was simply faulty data passed to the props.

Unfortunately propTypes are one of the most underutilized tools in the React ecosystem. You can find many components with prop validation like this:

 

What is difference between state and props in react ?

State Props
State receive initial value from parent component Props receive initial value from parent component
State parent component can not change value Props parent component can change value
State set default values inside component Props set default values inside component
State changes inside component Props can not change inside component
State set initial value for child components Props set initial value for child components
State can’t change inside child components Props change inside child components
Categories: React

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of
Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.