What is the difference between state and props in React

Question

I was watching a Pluralsight course on React and the instructor stated that props should not be changed  I m now reading an article  uberVU react-guide  on props vs  state and it says         Both props and state changes trigger a render update       Later in the article it says         Props  short for properties  are a Component s configuration  its options if you may  They are received from above and immutable         So props can change but they should be immutable   When should you use props and when should you use state    If you have data that a React component needs  should it be passed through props or setup in the React component via getInitialState

User · Answer

State is the way react deals with the information held by your component.

Let's suppose you have a component which need to fetch some data from the server. You usually would want to inform the user if the request is processing, if it has failed, etc. This is a piece of information which is just relevant for that specific component. This is where state enters the game.

Usually the best way to define state is as follows:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { key1: value1, key2: value2 }    
  }
}

but in the latests implementations of react native you can just do:

class MyComponent extends React.Component {
  state = { key1: value1, key2: value2 }    
}

These two examples execute in the exact same way, it's just a syntax improvement.

So, what is different from just using object attributes as we always have in OO programming? Usually, the information held in your state is not meant to be static, it will change over time and your View will need to update in order to reflect this changes. State offers this functionality in a simple way.

State IS MEANT TO BE INMUTABLE! and I cannot make enough stress on this. What does this means? It means that you should NEVER do something like this.

 state.key2 = newValue;

The proper way of doing it is:

this.setState({ key2: newValue });

Using this.setState your component runs through the update cycle and if any part of the state changes, your Component render method will be called again to reflect this changes.

Check the react docs for an even more expanded explanation: https://facebook.github.io/react/docs/state-and-lifecycle.html

User · Answer

You can understand it best by relating it to Plain   JS functions    Simply put   State is the local state of the component which cannot be accessed and modified outside of the component  It s equivalent to local variables in a function   Plain JS Function  const DummyFunction        gt      let name    Manoj     console log  Hey   name        React Component  class DummyComponent extends React Component     state         name   Manoj        render         return  lt div gt Hello  this state name  lt  div gt         Props  on the other hand  make components reusable by giving components the ability to receive data from their parent component in the form of props  They are equivalent to function parameters   Plain JS Function  const DummyFunction    name    gt      console log  Hey   name          when using the function DummyFunction  Manoj    DummyFunction  Ajay      React Component  class DummyComponent extends React Component     render         return  lt div gt Hello  this props name  lt  div gt              when using the component  lt DummyComponent name  Manoj    gt   lt DummyComponent name  Ajay    gt    Credits  Manoj Singh Negi   Article Link  React State vs Props explained

User · Answer

The props vs state summary I like best is here  react-guide Big hat tip to those guys  Below is an edited version of that page   props vs state tl dr If a Component needs to alter one of its attributes at some point in time  that attribute should be part of its state  otherwise it should just be a prop for that Component   props Props  short for properties  are a Component s configuration  They are received from above and immutable as far as the Component receiving them is concerned  A Component cannot change its props  but it is responsible for putting together the props of its child Components  Props do not have to just be data -- callback functions may be passed in as props  state The state is a data structure that starts with a default value when a Component mounts  It may be mutated across time  mostly as a result of user events  A Component manages its own state internally  Besides setting an initial state  it has no business fiddling with the state of its children  You might conceptualize state as private to that component  Changing props and state                                                     props   state     Can get initial value from parent Component     Yes     Yes     Can be changed by parent Component              Yes     No     Can set default values inside Component         Yes     Yes     Can change inside Component                     No      Yes     Can set initial value for child Components      Yes     Yes     Can change in child Components                  Yes     No   Note that both props and state initial values received from parents override default values defined inside a Component   Should this Component have state  State is optional  Since state increases complexity and reduces predictability  a Component without state is preferable  Even though you clearly can t do without state in an interactive app  you should avoid having too many Stateful Components  Component types Stateless Component Only props  no state  There s not much going on besides the render   function  Their logic revolves around the props they receive  This makes them very easy to follow  and to test  Stateful Component Both props and state  These are used when your component must retain some state  This is a good place for client-server communication  XHR  web sockets  etc    processing data and responding to user events  These sort of logistics should be encapsulated in a moderate number of Stateful Components  while all visualization and formatting logic should move downstream into many Stateless Components  sources  Question about  props  and  state  - Google Groups Thinking in React  Identify where your state should live

User · Answer

props are the JavaScript object  passed into a Component  that holds the configuration properties  props are immutable by the receiving Component state is the JavaScript object  managed within the Component  that holds its internal state  Updates to either trigger a re-render

User · Answer

Both props and states are the same in a way that both triggers the rerendering  the difference is that props come from parent components and states are managed in the current component  so states are mutable and props are immutable

User · Answer

The key difference between props and state is that state is internal and controlled by the component itself while props are external and controlled by whatever renders the component   function A props      return  lt h1 gt  props message  lt  h1 gt     render  lt A message    hello      gt  document getElementById    root            class A extends React Component      constructor props          super props        this state  data  Sample Data             render         return  lt h2 gt Class State data   this state data  lt  h2 gt             render  lt A   gt   document getElementById  root          State can be changed  Mutable  Whereas Props can t  Immutable

User · Answer

props  short for    properties     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     So simply state is limited to your current component but props can be pass to any component you wish    You can pass the state of the current component as prop to other components     Also in React  we have stateless components which only have props and not internal state     The example below showing how they work in your app   Parent  state-full component    class SuperClock extends React Component      constructor props        super props       this state    name   Alireza   date  new Date   toLocaleTimeString            render         return          lt div gt           lt Clock name  this state name  date  this state date    gt         lt  div gt                 Child  state-less component    const Clock     name    date     gt         lt div gt         lt h1 gt   Hi   name     lt  h1 gt         lt h2 gt   It is   date     lt  h2 gt       lt  div gt

User · Answer

React Components use state to READ WRITE the internal variables that can be changed mutated by for example   this setState  name   Lila      React props is special object that allow programmer to get variables and methods from Parent Component into Child Component   It s something like a Windows and doors of the house  Props are also immutable Child Component can not change update them   There are couple of the methods that help to listen when props are changed by Parent Component

User · Answer

React Components use state to READ WRITE the internal variables that can be changed mutated by for example   this setState  name   Lila      React props is special object that allow programmer to get variables and methods from Parent Component into Child Component   It s something like a Windows and doors of the house  Props are also immutable Child Component can not change update them   There are couple of the methods that help to listen when props are changed by Parent Component

User · Answer

State    states are mutable  states are associated with the individual components can t be used by other components  states are initialize on component mount  states are used for rendering dynamic changes within component    props    props are immutable  you can pass props between components   props are mostly used to communicate between components You can pass from parent to child directly  For passing from child to parent you need use concept of lifting up states     x000D   x000D  class Parent extends React Component  x000D    render   x000D      x000D       return  x000D           lt div gt  x000D               lt Child name     ron    gt  x000D           lt  div gt  x000D           x000D      x000D    x000D   x000D  class Child extends React Component  x000D    x000D      render    x000D        return  x000D            lt div gt  x000D                 this props name  x000D           lt  div gt  x000D           x000D         x000D    x000D   x000D   x000D

User · Answer

Both state and props in react are used to control data into a component  generally props are set by parent and passed to child components and they are fixed throughout the component  For data that is going to change  we have to use state  And props are immutable while states are mutable  if you want to change props you can do from parent component and then pass it to child components

User · Answer

In general  state of one component parent  is prop for the child component    State resides within a component where as props are passed from parent to  child  Props are generally immutable   class Parent extends React Component       constructor             super            this state                 name    John                       render             return                lt Child name  this state name  gt                     class Child extends React Component       constructor             super               render             return               this props name                        In the above code  we have a parent class Parent  which has name as its state which is passed to the child component Child class  as a prop and the child component renders it using  this props name

User · Answer

In React the states store the data as well as the props  Its difference with the latter is that the stored data can be modified by different changes  These are nothing more than objects written in flat JavaScript  so they can contain data or codes  represent the information you want to model  If you need more details it is recommended that you see these publications  Use of the State in React and  Use of Props in React

User · Answer

You have some data that is being entered by users somewhere in the application      the component in which the data is being entered should have this data in its state because it needs to manipulate and change it during data entry anywhere else in the application the data should be passed down as props to all the other components   So yes the props are changing but they are changed at the  source  and will then simply flow down from there   So props are immutable in the context of the component receiving them     E g  a reference data screen where users edit a list of suppliers would manage this in state  which would then have an action cause the updated data to be saved in ReferenceDataState which could be one level below AppState and then this supplier list would be passed as props to all the components that needed to use it

User · Answer

State resides within a component where as props are passed from parent to child  Props are generally immutable   class Parent extends React Component       constructor             super            this state                 name    John                       render             return                lt Child name  this state name  gt                     class Child extends React Component       constructor             super               render             return               this props name                       In the above code  we have a parent class Parent  which has name as its state which is passed to the child component Child class  as a prop and the child component renders it using  this props name

User · Answer

Basically  props and state are two ways the component can know what and how to render  Which part of the application state belongs to state and which to some top-level store  is more related to your app design  than to how React works  The simplest way to decide  IMO  is to think  whether this particular piece of data is useful for application as a whole  or it s some local information  Also  it s important to not duplicate state  so if some piece of data can be calculated from props - it should calculated from props   For example  let s say you have some dropdown control  which wraps standart HTML select for custom styling   which can a  select some value from list  and b  be opened or closed  i e   the options list displayed or hidden   Now  let s say your app displays a list of items of some sort and your dropdown controls filter for list entries  Then  it would be best to pass active filter value as a prop  and keep opened closed state local  Also  to make it functional  you would pass an onChange handler from parent component  which would be called inside dropdown element and send updated information  new selected filter  to the store immediately  On the other hand  opened closed state can be kept inside dropdown component  because the rest of the application doesn t really care if the control is opened  until user actually changes it value    The following code is not completely working  it needs css and handling dropdown click blur change events  but I wanted to keep example minimal  Hope it helps to understand the difference   const  store         items          id  1  label   One           id  2  label   Two           id  3  label   Three   new  true          id  4  label   Four   new  true          id  5  label   Five   important  true          id  6  label   Six           id  7  label   Seven   important  true             activeFilter   important     possibleFilters          key   all   label   All           key   new   label   New           key   important   label   Important           function getFilteredItems items  filter        switch  filter        case  all           return items       case  new           return items filter function item    return Boolean item new            case  important           return items filter function item    return Boolean item important            default          return items         const App   React createClass     render  function         return                lt div gt              My list                lt ItemList   items  this props listItems    gt             lt div gt               lt Dropdown                onFilterChange  function e                     store activeFilter   e currentTarget value                  console log  store      in real life  some action would be dispatched here                                filterOptions  this props filterOptions                value  this props activeFilter                  gt             lt  div gt           lt  div gt                    const ItemList   React createClass     render  function         return          lt div gt           this props items map function item              return  lt div key  item id  gt  item id    item label  lt  div gt                      lt  div gt                  const Dropdown   React createClass       getInitialState  function         return           isOpen  false                render  function         return            lt div gt               lt select              className  hidden-select             onChange  this props onFilterChange            value  this props value  gt               this props filterOptions map function option                return  lt option value  option key  key  option key  gt  option label  lt  option gt                         lt  select gt            lt div className   custom-select     this state isOpen     open         onClick  this onClick  gt               lt div className  selected-value  gt  this props activeFilter  lt  div gt             this props filterOptions map function option                return  lt div data-value  option key  key  option key  gt  option label  lt  div gt                         lt  div gt         lt  div gt                 onClick  function e        this setState           isOpen   this state isOpen                  ReactDOM render     lt App      listItems  getFilteredItems  store items   store activeFilter        filterOptions   store possibleFilters      activeFilter   store activeFilter        gt     document getElementById  root

User · Answer

Props   Props is nothing but property of component and react component is nothing but a javascript function     class Welcome extends React Component       render           return  lt h1 gt Hello  this props name  lt  h1 gt               const element      here  lt Welcome name  Sara    gt  passing a object  name    Sara   as props of Welcome component  To pass data from one parent component to child component we use props  Props is immutable  During a component   s life cycle props should not change  consider them immutable    State  state is accessible only within Component  To keep track of data within component we use state  we can change state by setState  If we need to pass state to child we have to pass it as props   class Button extends React Component     constructor         super        this state           count  0                updateCount         this setState  prevState  props    gt          return   count  prevState count   1                  render         return   lt button               onClick       gt  this updateCount                 gt                Clicked  this state count  times              lt  button gt

User · Answer

The main difference is that state are private to a component  and can be changed inside that component only while props are just static value and key for child component which is passed through parent component and can t be changed inside the child component

User · Answer

From   Andrea Chiarelli book    Beginning React  Simplify your frontend development workflow and enhance the user experience of your applications with React       Every React component has a props property  The purpose of this property is  to collect data input passed to the component itself  JSX attribute is  attached to a React element  a property with the same name is attached to the props  object  So  we can access the passed data by using the attached property  In addition  the  immutability of props allows us to think of components as pure functions  which  are functions that have no side effects  since they don t change their input data   We  can think of data passing from one component to another as a unidirectional data  flow  from the parent component toward the child components  This gives us a more  controllable system   React provides a mechanism  to support the automatic rendering of a component when data changes  Such a  mechanism is based on the concept of state  React state is a property that represents data that changes over time  Every  component supports the state property  but it should be used carefully  Components that store data that can change over time are said to be  stateful  components   A stateful component stores the state in the this state property  To inform a  component that the state has changed  you must use the setState   method  State initialization is the only case where you can assign a value to the this state property without using setState      setState   merges new data with old data already contained in the state   and overwrites the previous state setState   triggers the execution of the render   method  so you should  never call render   explicitly

User · Answer

Props  represents  read-only  data  that are immutable and refer to attributes from parents component   State  represents mutable data  that ultimately affects what is rendered on the page  and managed by internally by the component itself and change overtime commonly due to User input

User · Answer

Props   props use to pass data in the child component  props change a value outside a component child component    State   state use inside a class component state change a value inside a component If you render the page  you call setState to update DOM update page value    State has an important role in react

User · Answer

In short   props values can t be changed  immutable  state values can be changed  using setState method  mutable

User · Answer

The state is the origin of truth  where your data lives  You can say the state manifests itself via props   Providing props to components is what keeps your UI in sync with your data  A component is really just a function that returns markup    Given the same props  data for it to display  it will always produce the same markup   So the props are like the pipelines that carry the data from the origin to the functional components

User · Answer

Basically  the difference is that state is something like attributes in OOP   it s something local to a class  component   used to better describe it  Props are like parameters - they are passed to a component from the caller of a component  the parent    as if you called a function with certain parameters

User · Answer

Props simply are shorthand for properties  Props are how components talk to each other  If you   re at all familiar with React then you should know that props flow downwards from the parent component   There is also the case that you can have default props so that props are set even if a parent component doesn   t pass props down   This is why people refer to React as having uni-directional data flow  This takes a bit of getting your head around and I   ll probably blog on this later  but for now just remember  data flows from parent to child  Props are immutable  fancy word for it not changing   So we   re happy  Components receive data from the parent  All sorted  right   Well  not quite  What happens when a component receives data from someone other than the parent  What if the user inputs data directly to the component   Well  this is why we have state   STATE  Props shouldn   t change  so state steps up  Normally components don   t have state and so are referred to as stateless  A component using state is known as stateful  Feel free to drop that little tidbit at parties and watch people edge away from you   So state is used so that a component can keep track of information in between any renders that it does  When you setState it updates the state object and then re-renders the component  This is super cool because that means React takes care of the hard work and is blazingly fast   As a little example of state  here is a snippet from a search bar  worth checking out this course if you want to learn more about React   Class SearchBar extends Component    constructor props      super props   this state     term           render       return       lt div className  search-bar  gt      lt input     value  this state term     onChange  event   gt  this onInputChange event target value     gt      lt  div gt           onInputChange term      this setState  term      this props onSearchTermChange term          SUMMARY  Props and State do similar things but are used in different ways  The majority of your components will probably be stateless   Props are used to pass data from parent to child or by the component itself  They are immutable and thus will not be changed   State is used for mutable data  or data that will change  This is particularly useful for user input  Think search bars for example  The user will type in data and this will update what they see

User · Answer

Simple explanation is   STATE is local state of component for example colour    blue  or animation true etc   Use this setState to change state of component  PROPS is how components talk to each other  send data from parent to child  and make components reusable

User · Answer

as I learned while working with react    props are used by a component to get data from external environment i e another component   pure  functional or class  or a general class or javascript typescript code states are used to manage the internal environment of a component means the data changes inside the component

User · Answer

This is my current point of view regarding the explanation between state and props   State is like your local variable inside your component  You can manipulate the value of state by using set state  You can then pass the value of state to your child component for example  Props is the value that exactly located inside your redux store  this actually  comes from state that s originated from reducer  Your component should be connected to redux to get the value from props  You can also pass your props value to your child component

User · Answer

Props are values  objects or arrays passed into a component on render   These props are often values needed within the component to create the UI  set certain default functionality or used to populate fields   Props can also come in the form of functions passed down from the parent component that can be invoked by the child     State is managed within the component  child or parent    Here is a definition I found to support this

User · Answer

The main difference is states can be only be handled inside of components and props are handled outside of the components If we are getting data from outside and handled  in that case we should use states

User · Answer

In answer to the initial question about props being immutable  they are said to be immutable as far as the child component is concerned but are changeable in the parent

User · Answer

Props and state are related  The state of one component will often become the props of a child component  Props are passed to the child within the render method of the parent as the second argument to React createElement   or  if you re using JSX  the more familiar tag attributes    lt MyChild name  this state childsName    gt    The parent s state value of childsName becomes the child s this props name  From the child s perspective  the name prop is immutable  If it needs to be changed  the parent should just change its internal state   this setState   childsName   New name        and React will propagate it to the child for you  A natural follow-on question is  what if the child needs to change its name prop  This is usually done through child events and parent callbacks  The child might expose an event called  for example  onNameChanged  The parent would then subscribe to the event by passing a callback handler    lt MyChild name  this state childsName  onNameChanged  this handleName    gt    The child would pass its requested new name as an argument to the event callback by calling  e g   this props onNameChanged  New name    and the parent would use the name in the event handler to update its state   handleName  function newName       this setState   childsName  newName

User · Answer

props  --- you can not change its value  states --- you can change its value in your code  but it would be active when a render happens

User · Answer

Some differences between    state    and    props    in react   React controls and renders DOM based on state  There are two types of component states  props is the state that transfers between components  and state is internal state of components  Props is used for data transfer from the parent component to the child component  The components also have their own state inside  state which can only be modified inside the component   Generally the state of certain component could be the props of the child component  props will be passed to children which is stated inside the rendering method of the parent component

User · Answer

For parent-child communication  simply pass props   Use state to store the data your current page needs in your controller-view    Use props to pass data  amp  event handlers down to your child components    These lists should help guide you when working with data in your components    Props   are immutable    which lets React do fast reference checks  are used to pass data down from your view-controller    your top level component  have better performance    use this to pass data to child components    State   should be managed in your view-controller    your top level component  is mutable has worse performance should not be accessed from child components    pass it down with props instead       For communication between two components that don t have a   parent-child relationship  you can set up your own global event   system  Subscribe to events in componentDidMount    unsubscribe in   componentWillUnmount    and call setState   when you receive an event    Flux pattern is one of the possible ways to arrange this     -  https   facebook github io react tips communicate-between-components html      What Components Should Have State       Most of your components should simply take some data from props and   render it  However  sometimes you need to respond to user input  a   server request or the passage of time  For this you use state       Try to keep as many of your components as possible stateless  By doing   this you ll isolate the state to its most logical place and minimize   redundancy  making it easier to reason about your application       A common pattern is to create several stateless components that just   render data  and have a stateful component above them in the hierarchy   that passes its state to its children via props  The stateful   component encapsulates all of the interaction logic  while the   stateless components take care of rendering data in a declarative way       - https   facebook github io react docs interactivity-and-dynamic-uis html what-components-should-have-state      What Should Go in State       State should contain data that a component s event handlers may change   to trigger a UI update  In real apps this data tends to be very small   and JSON-serializable  When building a stateful component  think about   the minimal possible representation of its state  and only store those   properties in this state  Inside of render   simply compute any other   information you need based on this state  You ll find that thinking   about and writing applications in this way tends to lead to the most   correct application  since adding redundant or computed values to   state means that you need to explicitly keep them in sync rather than   rely on React computing them for you       -  https   facebook github io react docs interactivity-and-dynamic-uis html what-should-go-in-state

User · Answer

state - It is a special mutable property that hold a Component data  it has default value when Componet mounts    props - It is a special property which is immutable by nature and used in case of pass by value from parent to child  props are just a communation channel between Components  always moving from top  parent  to buttom child    below are complete example of combinding the state  amp  props  -    lt  DOCTYPE html gt       lt html gt         lt head gt           lt meta charset  UTF-8    gt           lt title gt state amp props example lt  title gt            lt script src  https   unpkg com react 0 14 8 dist react min js  gt  lt  script gt           lt script src  https   unpkg com react-dom 0 14 8 dist react-dom min js  gt  lt  script gt           lt script src  https   unpkg com babel-standalone 6 15 0 babel min js  gt  lt  script gt          lt  head gt         lt body gt         lt div id  root  gt  lt  div gt           lt script type  text babel  gt               var TodoList   React createClass                   render                        return  lt div className  tacos-list  gt                                                                        this props list map    todo  index     gt                                        return  lt p key    taco-   index      gt   todo   lt  p gt                                                                lt  div gt                                                  var Todo   React createClass                   getInitialState                        return                           list      Banana    Apple    Beans                                                                    handleReverse                        this setState  list   this state list reverse                                         render                        return  lt div className  parent-component  gt                                 lt h3 onClick  this handleReverse  gt List of todo  lt  h3 gt                                 lt TodoList list   this state list      gt                              lt  div gt                                                  ReactDOM render                   lt Todo  gt                   document getElementById  root                            lt  script gt         lt  body gt         lt  html gt

User · Answer

State is your data  is mutable  you can do anything you need with it  props is read only data  usually when you pass props you have already work with your data and you need the child component to render it or if your props is a function u call it to perform a task

[javascript] What is the difference between state and props in React?

Examples related to javascript

Examples related to reactjs

Examples related to react-state