{"id":5021,"date":"2021-01-29T16:52:40","date_gmt":"2021-01-29T13:52:40","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=5021"},"modified":"2023-04-14T20:07:47","modified_gmt":"2023-04-14T17:07:47","slug":"what-is-the-difference-between-state-and-props-in-react","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/","title":{"rendered":"What is The Difference Between State and Props in React?"},"content":{"rendered":"<p>Learning <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/09\/top-articles-copy-600x450.png\"  data-excerpt=\"Here is our list of JS articles of 2019. We collected 17 posts with tricks and tips in JavaScript and its frameworks.\" href=\"https:\/\/flatlogic.com\/blog\/17-articles-of-september-2019-to-learn-javascript\/\">React<\/a> starts with several concepts developers run into &#8211;&nbsp; JSX syntax, props, and <em>state<\/em>. <em>State<\/em> is a familiar concept for developers, while JSX syntax and <em>props<\/em> confuse new people in React because they are never mentioned in any other web frameworks. JSX syntax is optional and you can develop apps in React without that syntax (however, JSX makes the development process much easier after learning it). On the other hand, <em>props<\/em> and <em>state<\/em> are one of the most important topics when learning React. <em>Props<\/em> provide communication between components while <em>state<\/em> expands the possibilities of your app beyond the display of static content.&nbsp;&nbsp;&nbsp;<\/p><p><iframe data-src=\"\/\/www.slideshare.net\/slideshow\/embed_code\/key\/THGzQCqdILG9n\" width=\"594\" height=\"397\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:0px solid #CCC; border-width:0px; margin-bottom:0px; max-width: 100%;\" allowfullscreen=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"> <\/iframe><\/p><p>First, we refer to the <em>state<\/em> and <em>props<\/em> definitions, then look at two different types of components: <em>stateful<\/em> and <em>stateless<\/em>. People who are in search of a fast answer can jump straight into a brief comparison abstract and look through the table with briefing memos about the differences between <em>state<\/em> <em>and props<\/em>.&nbsp;&nbsp;<\/p><p><em>Enjoy reading!&nbsp;<\/em><\/p><h2 class=\"wp-block-heading\" id=\"definition\"><strong>Props and state definition<\/strong><\/h2><p><em>Props<\/em> are a <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/10\/Frame-8_1-1-600x450.png\"  data-excerpt=\"jQuery vs. JavaScript JavaScript Before we compare jQuery vs JavaScript, let&#039;s recall the basics. What is JavaScript used for? JavaScript allows websites to perform actions such as refreshing specific parts of a page without reloading the entire website, displaying pop-up messages, or introducing animations into 2D or 3D graphics. Overall, the main impact is on&hellip;\" href=\"https:\/\/flatlogic.com\/blog\/jquery-vs-javascript-why-we-removed-jquery-from-our-templates\/\">JavaScript<\/a> object that React components receive as an arbitrary input to produce a React element. They provide a data flow between the components. To pass the data <em>(props)<\/em> from one component to another as a parameter:<\/p><p><strong><em>For a class component<\/em><\/strong> you need to define the custom HTML attributes to which you assign your data and then pass it with special React JSX syntax:&nbsp;<\/p><pre class=\"wp-block-code\"><code>import React, { Component } from 'react'; class App extends Component { render() { const greeting = 'Welcome to React';  return ( &lt;div&gt; &lt;Greeting greeting={greeting} \/&gt; &lt;\/div&gt; ); }} class Greeting extends Component { render() { return &lt;h1&gt;{this.props.greeting}&lt;\/h1&gt;; }} export default App;<\/code><\/pre><p>To receive props class components need to use JavaScript keyword <em><code>this<\/code><\/em>.<\/p><p><strong><em>For a functional component<\/em><\/strong><em> props<\/em> are passed as an argument to a function:<\/p><pre class=\"wp-block-code\"><code>import React, { Component } from 'react'; class App extends Component { render() { const greeting = 'Welcome to React';  return ( &lt;div&gt; &lt;Greeting greeting={greeting} \/&gt; &lt;\/div&gt; ); }} const Greeting = props =&gt; &lt;h1&gt;{props.greeting}&lt;\/h1&gt;; \/\/ here an arrow function receives props with the name greetings export default App;<\/code><\/pre> <a href=\"https:\/\/flatlogic.com\/generator\"><img decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png\" alt=\"Professional Vibe Coding\" class=\"banner-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/640;\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png 2560w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-600x150.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1024x256.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-768x192.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1536x384.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-2048x512.png 2048w\" data-sizes=\"auto\" data-original-sizes=\"(max-width: 2560px) 100vw, 2560px\"> <\/a><p>In our example, our data was a string variable. But <em>props<\/em> can be anything: integers, objects, arrays, and even React components.&nbsp;&nbsp;<\/p><p><strong>State:<\/strong><\/p><p><em>State<\/em> is a JavaScript object which contains data that influence how the component looks at a certain point in time. The second part is what makes the <em>state<\/em> different compared to <em>props<\/em>. <em>State<\/em> is just a snapshot of the app in a time. Every user interaction with your app may lead to changes in the underlying <em>state<\/em> and in the whole UI as a result. <em>State<\/em> changes over the lifetime of a React component. Examples of <em>state<\/em>:<\/p><p><strong>For a class component<\/strong> you need to call the class <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes#constructor\"><em>constructo<\/em>r<\/a> inside the React component:<\/p><pre class=\"wp-block-code\"><code>import React, { Component } from 'react'; class Button extends Component { constructor(props) { super(props); this.state = { counter: 1 }; } render() { return ( &lt;button&gt;{this.state.counter}&lt;\/button&gt; ); }}export default Button;<\/code><\/pre><p><strong>For a functional component<\/strong> you need to use <em>useState<\/em> <a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\">Hook<\/a>:<\/p><pre class=\"wp-block-code\"><code>import React from 'react'; function Counter() { const &#91;count, setCount] = React.useState(1);  return ( &lt;div&gt; &lt;p&gt;You clicked {count} times&lt;\/p&gt; &lt;button onClick={() =&gt; setCount(count + 1)}&gt; Click me &lt;\/button&gt; &lt;\/div&gt; );} export default Counter;<\/code><\/pre><p><em>State<\/em> breathes life into your application and is a thing that makes your application dynamic and interactive. <em><a href=\"https:\/\/reactjs.org\/docs\/faq-state.html\">State<\/a><\/em> could be Boolean, integers, strings, or complex JavaScript objects.<\/p><h2 class=\"wp-block-heading\" id=\"stateful-stateless\"><strong>Stateful and stateless components<\/strong><\/h2><p><strong>Stateless Component<\/strong><em>&nbsp;<\/em>may contain only<em>&nbsp;props, <\/em>no<em>&nbsp;state<\/em>. Such a component can be associated with a function: it receives input ( <em>&#8216;props&#8217;<\/em> object) and returns the result (React element). Stateless components are used when you want to represent the <em>props<\/em> and the component doesn&#8217;t need to be interactive. They are easy to use and easy to test.&nbsp;<em>&nbsp;<\/em><\/p><p><strong>Stateful Component<\/strong>&nbsp;may contain&nbsp;<em>props&nbsp;<\/em>but has to have<em>&nbsp;state.<\/em>&nbsp;A stateful component owns its <em>state<\/em> and can change it. When the component changes <em>state<\/em>, it re-renders. <em>Stateful<\/em> <em>components<\/em> help when the app needs to respond to user input and actions. They provide a dynamic user interface through client-server communication and help to create interactive pages.&nbsp;Traditionally functional components are <em>stateless<\/em>, while class components feature manipulations with <em>state<\/em>. However, it has changed with the introduction of <em>Hooks<\/em><code> <\/code>for functional components. <em>State<\/em> was one of the key advantages of class components, but nowadays <em>Hooks<\/em> added <em>state<\/em><code> <\/code>management and <em><code>lifecycle methods<\/code><\/em> to functional components, so they are also can be called <em>stateful components<\/em>. You can read more about class and functional components in <a href=\"https:\/\/flatlogic.com\/blog\/functional-components-vs-class-components-in-react-js\/\">this article<\/a>.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"brief-comp\"><strong>Brief comparison<\/strong><\/h2><p>Let&#8217;s begin with facts that are common both for <em>props<\/em> and <em>state<\/em>.&nbsp;<\/p><ul class=\"wp-block-list\"><li>React components <strong>re-render<\/strong> if <em>props<\/em> or <em>state<\/em> <strong>have changed<\/strong>. Any update from anywhere in the code triggers an automatic re-render of the appropriate part of the User Interface.&nbsp;<\/li><li><em>Props<\/em> and <em>state<\/em> are <strong>JS objects<\/strong>, which means they both contain as many properties and methods as we need.&nbsp;<\/li><li><strong>The same combination<\/strong> of <em>props<\/em> and <em>state<\/em> must <strong>produce the same output<\/strong>. This type of component is deterministic.&nbsp;<\/li><\/ul><p><em>Here is a brief comparison between state and props.<\/em><\/p><p>[table id=7 \/]<\/p><h2 class=\"wp-block-heading\" id=\"detailed-comp\"><strong>State vs. props &#8211; detailed comparison<\/strong><\/h2><h3 class=\"wp-block-heading\" id=\"initial\"><strong>State has to have the initial value, while props can be empty<\/strong><\/h3><p><em>State<\/em> can&#8217;t exist without the initial value. When the component becomes <em>stateful<\/em> you need to declare the first value of <em>state<\/em> directly.&nbsp;<\/p><p>In class components using <em><code>constructor()<\/code>:<\/em><\/p><pre class=\"wp-block-code\"><code>class CalmDown extends React.Component { constructor(props) { super(props);  this.state = { currentState: \"not-panic\", } }} <\/code><\/pre><p>In functional component we set the initial value via Hook <code>useState()<\/code><\/p><pre class=\"wp-block-code\"><code>import { useState } from 'react'; function TimeToPanic() { \/\/ Declare a new state variable, which we'll call \"mood\" const &#91;mood, changeMood] = useState('calm'); \/\/ we declare a new state variable \"mood\" with the initial value equal to 0  return ( &lt;div&gt; &lt;p&gt;You feel {mood}&lt;\/p&gt; &lt;button onClick={() =&gt; changeMood(mood='the panic')}&gt; Click me &lt;\/button&gt; &lt;\/div&gt; );}<\/code><\/pre><p>In the example above <em><code>changeMood<\/code><\/em> is a method that allows us to update the mood&#8217;s <em>state<\/em>. The component can get the initial <em>state<\/em> from the parent component.&nbsp;The initial <em>state<\/em> for <em>props<\/em> is not a necessary staff. We can pass an empty value or set the default value when the <em>props<\/em> are empty.<\/p><pre class=\"wp-block-code\"><code>function CatComponent(props) { return &lt;div&gt;{props.catName} Cat, Eye Color: {props.eyeColor}, Age: {props.age}&lt;\/div&gt;}CatComponent.defaultProps = { catName: \"Sandy\", eyeColor: \"deep blue\", age: \"120\" } const cat = &lt;CatComponent catName=\"Milk\"\/&gt;<\/code><\/pre><p><em>CatComponent<\/em> renders the following string: &#8220;Milk&nbsp;Cat, Eye Color:&nbsp;deep blue, Age:&nbsp;120&#8221;. Since we pass empty values for <em>props<\/em> attributes <em>eyeColor<\/em> and age the component uses the default values for them, while the attribute <em>catName<\/em> returns the value we have previously assigned. If <em>CatComponent<\/em> is called without the default values, it will simply render &#8220;Milk&nbsp;Cat, Eye Color:&nbsp;, Age:&#8221;<\/p><p>Both <em>props<\/em> and <em>state<\/em> initial values received from parents override default values defined inside a Component.&nbsp;&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"mutable-immutable\">Props are immutable, while state is mutable<\/h3><p>One <a href=\"https:\/\/reactjs.org\/docs\/components-and-props.html#props-are-read-only\">significant limit<\/a> to <em>props<\/em> is that they are<em> read-only<\/em> from inside the component. There is no way in React for a component to set a new value for its incoming <em>props<\/em>. That brings us to the concept of <em>pure <\/em>components that don&#8217;t change their inputs and return the same result for the same <em>props<\/em>. Trying to change the <em>props<\/em> will throw an error, so the following block of code will not work:<\/p><pre class=\"wp-block-code\"><code>function Add(props) { if (typeof props.n2 === 'undefined') { props.n2 = 0 } return ( &lt;div&gt; {props.n1} + {props.n2} = {props.n1 + props.n2} &lt;\/div&gt; )} \/\/ TypeError: Cannot add property n2, object is not extensible<\/code><\/pre><p>That is totally consistent with the role <em>props<\/em> play: they just pass data from component to component. Although a component is not allowed to change its props, it is responsible for the&nbsp;<em>props<\/em>&nbsp;of its child components down the component tree.&nbsp;<\/p><p>On the other hand<strong>,&nbsp;<\/strong><em>state&nbsp;<\/em>is mutable. A <em>stateful<\/em> <em>component<\/em> changes its <em>state<\/em> every time users interact with the app. Furthermore, a <em>stateful<\/em> <em>component<\/em> is responsible for management only its own <em>state<\/em> and has no impact on child components (a parent component can only set the initial <em>state<\/em> of its children components, we discuss it further below). We can say that <em>state<\/em> of every component is private. There are some <a href=\"https:\/\/reactjs.org\/docs\/state-and-lifecycle.html#using-state-correctly\">rules<\/a> on how to use and modify <em>state<\/em> correctly:&nbsp;<\/p><ul class=\"wp-block-list\"><li><strong>No direct modification<\/strong>: command <code>this.state.name = 'me'<\/code>; is allowed only for the initial initialization of <em>state<\/em>, in <em><code>render()<\/code><\/em> method we need to use <em><code>setState()<\/code><\/em><\/li><li><strong>State updates may be asynchronous <\/strong><em><code>setState()<\/code><\/em>&nbsp;callbacks all happen together at the end of the <em>state<\/em> update phase in React, not immediately after that particular update happens. That may lead to confusion.<\/li><\/ul><h3 class=\"wp-block-heading\" id=\"role\">The role state and props play<\/h3><p>Here we come to the difference in concepts of these two objects.&nbsp;<\/p><p>The role of <em>state<\/em>:&nbsp;<\/p><ul class=\"wp-block-list\"><li>Make the components interactive<\/li><li>Provide users with an opportunity to modify the <em>state<\/em><\/li><li>Track data values over the lifetime of the component&nbsp;<\/li><li>Update the UI when the <em>state<\/em> has been changed&nbsp;<\/li><li>React when the time passes (interval or timeout)<\/li><\/ul><p>The role of <em>props<\/em>:&nbsp;<\/p><ul class=\"wp-block-list\"><li>To display static non-interactive components and data<\/li><li>To pass data from a component to component<\/li><\/ul><p>An additional role of <em>state<\/em> that should be mentioned is fetching remote data. The component fetch data after it is mounted, so <em>state<\/em> allows us to update the component once the data from a third-party resource comes.<\/p><h3 class=\"wp-block-heading\" id=\"passed\">State can be passed as props to child components<\/h3><p>The <em>state<\/em> of one component can be passed as a <em>prop<\/em> to child components. There is no difference for the child component whether the incoming <em>prop<\/em> is <em>state<\/em> of the parent components or a simple <em>prop<\/em>. The component gets the data and uses it in rendering &#8211; that is all. If the incoming <em>props<\/em> change (doesn&#8217;t matter because of the changes in parent component <em>state<\/em> or because the <em>props<\/em> were changed) the child component re-renders.So <em>props<\/em> and <em>state<\/em> are interrelated. We can pass <em>state<\/em> as <em>props<\/em> within the <em>rendermethod<\/em> of the parent component:<\/p><pre class=\"wp-block-code\"><code>class CalmDown extends React.Component { constructor(props) { super(props);  this.state = { currentState: \"do not panic\", } } render() { return &lt;div&gt;Just remember: {this.state.currentState}&lt;\/div&gt;; &lt;MyChild mood = {this.state.currentState}\/&gt; }} class MyChild extends React.Component { return &lt;h1&gt;Hello! I {this.props.mood}&lt;\/h1&gt;; }}}<\/code><\/pre><p>The parent&#8217;s <em>state<\/em> value of <em><code>currentState<\/code><\/em> becomes the child&#8217;s <em><code>this.props.mood<\/code><\/em>. For <em><code>MyChild<\/code><\/em> component <em>mood<\/em> <em>props<\/em> is immutable. If we need to change the <em>props<\/em> in the child component, we need to change the <em>state<\/em> in the parent component:<\/p><pre class=\"wp-block-code\"><code>this.setState({ currentState: 'PANIC!'})<\/code><\/pre><p>And then React passes the new value to <em><code>MyChild<\/code><\/em> component and re-render both elements.&nbsp;<\/p><p>If we want to change the name of the <em>prop<\/em>, we should create a child event and parent callback. Guess that we have an event called <em><code>onNameChanged<\/code><\/em> in the child that passes <code><em>newMood<\/em> <\/code>as an argument to the event callback. Let add a callback handler and the event handler to the parent:<\/p><pre class=\"wp-block-code\"><code>MyChild mood ={this.state.currentState} onNameChanged={this.handleMood} \/&gt;handleMood: function(newMood) { this.setState({ currentState: newMood });}<\/code><\/pre><p>And then we set a new name for child <em>prop<\/em>. We didn&#8217;t bend the rule that data should go from parent components to child components (downwards). The <em>mood<\/em> <em>prop<\/em> is managed by the parent <em><code>CalmDown<\/code><\/em> component, only the parent can change the <em>prop<\/em> for child components and pass it once again.&nbsp;Basically, it is the way how React components communicate with each other and how <em>props<\/em> are passed. They go downwards from parent to child components. And the <em>state<\/em> of the parent can become the <em>prop<\/em> of the child.<\/p><h3 class=\"wp-block-heading\" id=\"higher-order\">Usage of state and props in higher-order components<\/h3><p>To build a higher-order class component we have to use <em>state<\/em>, while the same component in terms of functionality that is built with functional components requires <em>props<\/em> only.&nbsp;<\/p><p>Higher-order components are functions that take a component as an input and transform it not into UI, but another component.&nbsp;<\/p><p>Let&#8217;s build a login higher-order class component with a form where we input email and password and the component returns the answer whether such a user is registered in the app or not.<\/p><pre class=\"wp-block-code\"><code>import React from 'react';import { withRouter } from 'react-router-dom';import { connect } from 'react-redux'; class Example extends React.Component { static propTypes = { dispatch: PropTypes.func.isRequired, };  constructor(props) { super(props);  this.state = { email: 'admin@flatlogic.com', password: 'password', };  this.doLogin = this.doLogin.bind(this); } doLogin(e) { e.preventDefault(); this.props.dispatch(loginUser({ email: this.state.email, password: this.state.password })); } isLogin () { return this.props.isAuthenticated} render() {return (&lt;form onSubmit={this.doLogin}&gt; &lt;button type=\"submit\"&gt;Login&lt;\/button&gt;&lt;\/form&gt; ); }} function mapStateToProps(state) { return { isAuthenticated: state.auth.isAuthenticated, };} export default withRouter(connect(mapStateToProps)(Login));functional components:<\/code><\/pre><p>We use <em>state<\/em> to take user input data and only after that step can we call the higher-order function <em><code>isAuthenticated<\/code><\/em> with state as an argument.&nbsp;&nbsp;<\/p><p>Let&#8217;s examine exactly the same component in terms of functionality, but built using <em>props<\/em> only:<\/p><pre class=\"wp-block-code\"><code>import React from \"react\";import { useDispatch, useSelector } from \"react-redux\"; const Login = () =&gt; { const dispatch = useDispatch(); const isAuth = useSelector(store =&gt; store.auth.isAuth)   const doLogin = () =&gt; { if (isAuth) { \/\/ some async logic } }  return ( &lt;form onSubmit={() =&gt; dispatch(doLogin())}&gt; &lt;button type=\"submit\"&gt;Login&lt;\/button&gt; &lt;\/form&gt; );}; export default Login;<\/code><\/pre><p>Our new component has fewer lines of code but provides the same functionality. Thus, to make a login form we have to build higher-order functions with <em>state<\/em> in class components. In functional components we use <em>Hook<\/em> <em><code>useDispatch()<\/code><\/em> and constants (<em>props<\/em>).<\/p><h2 class=\"wp-block-heading\" id=\"when-to-use\"><strong>So when to use state and props?<\/strong><\/h2><p>Hope that we shed some light on the difference between the two React concepts. However, there is one more question left:&nbsp;<\/p><p><em>When are we supposed to use props and when resort to state?&nbsp;<\/em><\/p><p>Some basic rules:&nbsp;<\/p><ol class=\"wp-block-list\"><li><strong>Components without <\/strong><strong><em>state<\/em><\/strong><strong> are preferable<\/strong>. <em>State<\/em> increases the common complexity of the app, makes the render result less predictable and testing less steady. Although you can&#8217;t avoid using <em>state<\/em> in the app because <em>state<\/em> is the basis for building interactive apps in React, just make sure that your app has as many <em>Stateful<\/em> <em>components<\/em> as possible.&nbsp;<\/li><li>A wide-spread pattern of building apps is to&nbsp;<strong>make several <\/strong><strong><em>stateful components<\/em><\/strong><strong> on top of the hierarchy and create <\/strong><strong><em>stateless components<\/em><\/strong><strong> under them<\/strong>, passing all necessary information and staff via <em>props<\/em> from parents to child components. The point here is to isolate the logic of interaction on the top of the app in parent <em>stateful<\/em> <em>components<\/em> and to transfer the responsibility of rendering data to child <em>stateless<\/em> <em>components<\/em>.&nbsp;<\/li><\/ol><p>When we should use <em>stateless<\/em> <em>components<\/em>:&nbsp;<\/p><ol class=\"wp-block-list\"><li>When we need to display the data<\/li><li>When we build a non-interactive element in the UI<\/li><li>When we have a <em>stateful<\/em> <em>component<\/em> above, we should check whether it&#8217;s possible to use <em>state<\/em> from above rather than introduce a new local <em>state<\/em><\/li><\/ol><p>When we should use <em>stateful<\/em> <em>components<\/em>:&nbsp;<\/p><ol class=\"wp-block-list\"><li>When the component is supposed to accept user input&nbsp;<\/li><li>When we build an interactive UI element&nbsp;<\/li><li>When the component needs to work with data that it can&#8217;t get as props from parent components<\/li><li>When we work with fetching data<\/li><\/ol><p><em>Thanks for reading!<\/em><\/p><h4 class=\"wp-block-heading\" id=\"suggested\"><strong>You might also like these articles:<\/strong><\/h4><ul class=\"wp-block-list\"><li><a href=\"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/\">React.js vs. React Native. What are the Key Differences and Advantages?<\/a><\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/top-12-bug-tracking-tools\/\"><a href=\"https:\/\/flatlogic.com\/blog\/14-great-admin-panel-themes-for-e-commerce\/\">14 Great Admin Panel Themes for E-commerce<\/a><\/a><\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/angular-vs-bootstrap-6-key-differences-pros-and-cons\/\"><a href=\"https:\/\/flatlogic.com\/blog\/what-is-react-template-react-template-definition\/\">What Is React Template? React Template Definition<\/a><\/a><\/li><\/ul>","protected":false},"excerpt":{"rendered":"<p>Learning React starts with several concepts developers run into &#8211;&nbsp; JSX syntax, props, and state. State is a familiar concept for developers, while JSX syntax and props confuse new people&#8230;<\/p>\n","protected":false},"author":12,"featured_media":5028,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"flatlogic_tldr":"Props are read-only inputs for components; they enable parent-to-child data flow.\nState is mutable, local to a component, and drives interactive, dynamic UI updates.\nClass components use constructor and this.state; functions use useState and props args.\nKeep minimal state high in the tree; pass data down as props to stateless children.","flatlogic_facts":[{"text":"Props are read-only in React; components cannot modify their incoming props.","source":"https:\/\/reactjs.org\/docs\/components-and-props.html#props-are-read-only"},{"text":"State in functional components is managed with the useState Hook.","source":"https:\/\/reactjs.org\/docs\/hooks-intro.html"},{"text":"State updates may be asynchronous; setState calls are batched.","source":"https:\/\/reactjs.org\/docs\/state-and-lifecycle.html#using-state-correctly"},{"text":"React components re-render when props or state change.","source":""},{"text":"State requires an initial value; props can be empty or use defaults.","source":""}],"footnotes":""},"categories":[28],"tags":[35,442,523,321],"class_list":["post-5021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","tag-reactjs","tag-react-components","tag-react-hooks","tag-reactjs-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is The Difference Between State and Props in React? - Flatlogic Blog<\/title>\n<meta name=\"description\" content=\"Knowing the difference between React state and props can be tricky, cuz JSX syntax and props are never mentioned in any other web frameworks.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is The Difference Between State and Props in React?\" \/>\n<meta property=\"og:description\" content=\"Knowing the difference between React state and props can be tricky, cuz JSX syntax and props are never mentioned in any other web frameworks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Flatlogic Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flatlogic\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100001762508143\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-29T13:52:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-14T17:07:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/01\/Frame-181yvf.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Artem Kardash\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:site\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Artem Kardash\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is The Difference Between State and Props in React? - Flatlogic Blog","description":"Knowing the difference between React state and props can be tricky, cuz JSX syntax and props are never mentioned in any other web frameworks.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/","og_locale":"en_US","og_type":"article","og_title":"What is The Difference Between State and Props in React?","og_description":"Knowing the difference between React state and props can be tricky, cuz JSX syntax and props are never mentioned in any other web frameworks.","og_url":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/","og_site_name":"Flatlogic Blog","article_publisher":"https:\/\/www.facebook.com\/flatlogic","article_author":"https:\/\/www.facebook.com\/profile.php?id=100001762508143","article_published_time":"2021-01-29T13:52:40+00:00","article_modified_time":"2023-04-14T17:07:47+00:00","og_image":[{"width":1600,"height":1200,"url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/01\/Frame-181yvf.png","type":"image\/png"}],"author":"Artem Kardash","twitter_card":"summary_large_image","twitter_creator":"@flatlogic","twitter_site":"@flatlogic","twitter_misc":{"Written by":"Artem Kardash","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/#article","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/"},"author":{"name":"Artem Kardash","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/f20c62a992d341383298cc1e75d122eb"},"headline":"What is The Difference Between State and Props in React?","datePublished":"2021-01-29T13:52:40+00:00","dateModified":"2023-04-14T17:07:47+00:00","mainEntityOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/"},"wordCount":2052,"publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/01\/Frame-181yvf.png","keywords":["React","React Components","React Hooks","ReactJS Development"],"articleSection":["Guides"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/","url":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/","name":"What is The Difference Between State and Props in React? - Flatlogic Blog","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/#primaryimage"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/01\/Frame-181yvf.png","datePublished":"2021-01-29T13:52:40+00:00","dateModified":"2023-04-14T17:07:47+00:00","description":"Knowing the difference between React state and props can be tricky, cuz JSX syntax and props are never mentioned in any other web frameworks.","breadcrumb":{"@id":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/#primaryimage","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/01\/Frame-181yvf.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/01\/Frame-181yvf.png","width":1600,"height":1200,"caption":"React props vs state"},{"@type":"BreadcrumbList","@id":"https:\/\/flatlogic.com\/blog\/what-is-the-difference-between-state-and-props-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flatlogic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is The Difference Between State and Props in React?"}]},{"@type":"WebSite","@id":"https:\/\/flatlogic.com\/blog\/#website","url":"https:\/\/flatlogic.com\/blog\/","name":"Flatlogic Blog","description":"Vibe-coding, AI Agents, Professional Software Development Services, Case Studies and More","publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"alternateName":"Flatlogic Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flatlogic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/flatlogic.com\/blog\/#organization","name":"Flatlogic","url":"https:\/\/flatlogic.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","width":970,"height":257,"caption":"Flatlogic"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flatlogic","https:\/\/x.com\/flatlogic","https:\/\/www.instagram.com\/flatlogiccom\/","https:\/\/www.linkedin.com\/company\/flatlogic\/"]},{"@type":"Person","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/f20c62a992d341383298cc1e75d122eb","name":"Artem Kardash","sameAs":["https:\/\/www.facebook.com\/profile.php?id=100001762508143","Master of Vue, whizkid and a naughty boy who is eager to resolve complex web issues. Artem is an experienced developer with a systematic approach to any task. He has been programming for more than 7 years! As a content muncher, he is also known for his passion to TikTok and various comic videos."],"url":"https:\/\/flatlogic.com\/blog\/author\/shoudaos\/"}]}},"_links":{"self":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/5021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/comments?post=5021"}],"version-history":[{"count":12,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/5021\/revisions"}],"predecessor-version":[{"id":13962,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/5021\/revisions\/13962"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media\/5028"}],"wp:attachment":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media?parent=5021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/categories?post=5021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/tags?post=5021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}