5

After occupying myself a bit with learning React I still consider many of the concepts as hard to get.

Among other: The immutability of props.

If I get it right then components are, more or less, the equivalent to objects in object-oriented programming.

In object-oriented programming you pass data into objects via method-parameter. In React you got props for passing data into components.

If you pass a parameter to a Java-method then you can change these data within the method-body. No problem.

In React not possible because props are immutable.

All literature and stuff I've seen mentions these immutability as a important concept. But so far nobody have really told me why.

Can someone please tell me: What's the great benefit of having immutable props?

Or respectively: What would be the great disadvantage of not having immutability? What could happen if props are mutable instead?

Preferable as a good example. Then chances are bigger that I perhaps get it.

cluster1
  • 4,968
  • 6
  • 32
  • 49
  • related http://stackoverflow.com/questions/34385243/why-is-immutability-so-importantor-needed-in-javascript/34387971#34387971 – Jared Smith Apr 05 '17 at 16:08

3 Answers3

8

I'll keep it short as I am no expert in functional programming. I'm sure someone with far more experience will pitch in eventually.

Start off by thinking of your components, not in terms of Objects but instead, as functions (as in the mathematical term). Your component is a function of its properties. More specifically it's a render function. It takes props and returns HTML (actually it returns virtual dom trees, but that's irrelevant)

Functions in mathematics are pure. You give them an input, they give you an output. They do not have side effects and they do not use any other inputs. And that gives you some great benefits:

  1. Pure functions are predictable. Every input will have exactly the same output. Being predictable, means they can be optimized and utilize things like memoization to cache their result or not having to render parts of your UI if their props didn't change since you know they will not change.
  2. Depending only on the input you are given helps tremendously when trying to debug when something is wrong as you don't need to worry about global state. You only have to worry about the properties passed to you.
  3. You don't have to worry about the order that pure function are executed in, since they are guaranteed to have no side effects.
  4. It allows for really cool developer experience like time travel debugging and hot-swappable components.

Those are just some benefits, an average developer like myself can see. I'm sure someone with real functional programming experience can come with tons more. Hope it helps

Dogoku
  • 4,585
  • 3
  • 24
  • 34
  • Side effects mean that it changes the state of the system as whole? – cluster1 Jul 30 '16 at 09:51
  • Yes. If a function does something other than what it's supposed to, (e.g it saves something on `window` or increases a counter somewhere, it means that it has a side effect. If on the other hand, it takes it's input and **ONLY** returns it's result, it means it has no side effects. – Dogoku Jul 30 '16 at 09:57
  • Imagine what would happen if basic unix commands like cd, cp, rm had side effects that you can't control. It would be impossible to confidently and safely use a computer. It's the same idea. Your components should do only what they are meant to do and nothing more. In React's case, they should not change global state and they should not change their props and they should only return the rendered html – Dogoku Jul 30 '16 at 10:00
  • As a final recommendation, I suggest you read up on articles about [Immediate Mode Rendering](https://medium.com/@puppybits/immediate-mode-reactjs-7a6302cd89cd#.1x1ibzpug) since that's another benefit of writing code this way – Dogoku Jul 30 '16 at 10:20
3

(After reading the following Why can't I update props in react.js?)

It is a good separation of responsibilities if you can only change your own state, and you communicate your state indirectly with props. This results in a higher cohesion.

It is possible to make much less understandable code if you were allowed within component A to change state of component B by directly changing props.

I hope this answers the why.

Community
  • 1
  • 1
Jasper Hilven
  • 31
  • 4
3

The greatest benefit of immutability is that whatever your component renders is predictable. The resulting view is just a map of some props. Imagine if in a hierarchy each component are able to change the props that gets passed around. It will be hard to track whomever was the one who did the modification.

This is the reason why in functional programming pure functions and immutable types are the norm. It is easy to reason out -- a pure function is a pure mapping of input and output and that is it.

Warren Mira
  • 242
  • 1
  • 7
  • Let's say I have a top component, some mid components. And a bottom component which finally renders the data. If someone makes a copy of a prop somewhere in the middle, changes the copy, then passes that copy downwards. If now a bug occurs I would be in the situation: I can not exactly say WHERE the problem is situated ! There's no guarantee that the data from a higher level flow down unchanged. So I still don't see the great benefit. – cluster1 Jul 30 '16 at 09:41
  • why would you not know? If you derive the props then you will know that the problem is from where the props was modified or the source of the props? If you always see to it that data you passed is immutable via some library or via Object.freeze then you know exactly that the source of the bug is from the component that derived that data or made the copy. It is definitely not from the top level component that initiated the props. – Warren Mira Jul 30 '16 at 11:21
  • I think finally I get the idea ... Sometimes one needs a bit of forward and back. Thanks a lot. :) – cluster1 Jul 30 '16 at 12:33