React - What's the great benefit of having immutable props?

Question

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.

Answer 1

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