{"id":73441,"date":"2020-01-15T17:58:44","date_gmt":"2020-01-15T12:28:44","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=73441"},"modified":"2024-04-12T14:23:13","modified_gmt":"2024-04-12T08:53:13","slug":"react-state-basics","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/react-state-basics\/","title":{"rendered":"React State Basics"},"content":{"rendered":"

props (short for \u201cproperties\u201d) and state are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).<\/p>\n

The state is an instance of React Component Class can be defined as an object of a set of observable properties that control the behaviour of the component. In other words, the State of a component is an object that holds some information that may change over the lifetime of the component. For example, let us think of the clock that we created in this article, we were calling the render() method every second explicitly, but React provides a better way to achieve the same result and that is by using State, storing the value of time as a member of the component\u2019s state.<\/p>\n

By default, a component has no state. The Welcome component from above is stateless:<\/p>\n

function Welcome(props) {<\/p>\n

return <h1>Hello {props.name}<\/h1>;<\/p>\n

}<\/p>\n

Difference of Props and State<\/strong><\/p>\n

We have already learned about Props and we got to know that Props is also an object that holds information to control the behaviour of that particular component, sounds familiar to State indeed but props and states are nowhere near to be same. Let us differentiate the two.<\/p>\n