24

I've been reading React's Quick Start documentation;

Whether you declare a component as a function or a class, it must never modify its own props

This is a "pure" function, because it doesn't attempt to change its inputs, and always returns the same result for the same inputs:

function sum(a, b) {
  return a + b;
}

This in an "impure" function, because it changes its own input: https://codesandbox.io/s/9z38xv4x7r

function SayHi(props) {
  props.name = "Jim"; // TypeError Cannot assign to read only property 'name' of object '#<Object>'
  return <h1>Hi {props.name}!</h1>;
}

Why are React props read-only?

dǝɥɔS ʇoıןןƎ
  • 1,674
  • 5
  • 19
  • 42
  • 1
    Linking https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react – Dane Nov 24 '17 at 11:17

3 Answers3

39

A component should manage its own state, but it should not manage its own props. props is essentially "state that is managed by the component owner." That's why props are immutable.

React docs also recommends to treat state as if it's immutable. That is because by manipulating this.state directly you are circumventing React’s state management, which can be potentially dangerous as calling setState() afterwards may replace the mutation you made.

dǝɥɔS ʇoıןןƎ
  • 1,674
  • 5
  • 19
  • 42
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
14

You may think of React component as a function of its props and state. As you advance through the docs, you'll find that this is the case, as most functions in the React component life cycle have signatures of the form (prop, state) => { //code }.

React docs define props as any arbitrary input given to a component, and the component will render something based on the props ( and sometimes based on state too, if it is a stateful component ). So props is like something that is given to the component for say, reference. Imagine it this way: you are a component, and your parent component gives you a reference book, containing some rules on how you must behave ( a.k.a. render ). Two cases may arise:

  1. You are dumb (stateless): You just read the book, and behave so.
  2. You are smart (stateful): You read the book, and then note some things in your notepad, that you may view, update or delete. You may even take copy down content from the book to your notepad, and then edit the notepad.

Either way, you may not update the reference book given to you. Only the parent component can update it ( example, give you another book, or change its content ).

I don't know if this is a correct representation, but React components work in a similar way. You'll get the hang of it soon. Make sure you read Thinking in React too. Happy coding!

Dane
  • 9,242
  • 5
  • 33
  • 56
  • 1
    This is a great illustration of how dumb/stateless and smart/stateful components work conceptually. The analogy is superb! – Antonio Pavicevac-Ortiz Jan 05 '19 at 00:09
  • 1
    Stateless and stateful analogy is well described. – Niraj Chavan Sep 06 '20 at 09:31
  • 1
    Does updating props in child component count as "managing"? E.g. pass the setter down, dispatch an action that trigger state change,... i.e. not blatantly change props like `props.foo = bar`. If this isn't managing today, was it ever considered so in the old day of class component? – Minh Nghĩa Apr 18 '23 at 20:44
  • 1
    @MinhNghĩa Passing a setter inside an abstraction wouldn't be directly "managing". For eg. we could pass an `onClick` function to the child which in turn calls `setState` inside. So the child component is still "dumb" and knows that it needs to invoke `onClick` when something is clicked, and the logic of setting/managing the state is still with the parent. It's best practice to pass specific callbacks than do something like ``. Makes sense? – Dane Apr 27 '23 at 08:45
2

The props of a react component is aimed to store values and functions from its parent component. It's just the pattern, props are immutable. If you want to have a variable that would be mutable, then store it in the state of the component. States are mutable.

Pang
  • 9,564
  • 146
  • 81
  • 122
cdaiga
  • 4,861
  • 3
  • 22
  • 42