6 ms·

FWIW, React has always been designed around some Functional Programming type principles, such as immutable updates. Immutable updates do in fact require that i

FWIW, React has always been designed around some Functional Programming type principles, such as immutable updates. Immutable updates do in fact require that if you want to update `state.some.nested.field`, you have to make copies of _all_ objects in that path: `nested`, `some`, and `state`. This isn't unique to React. Yes, class component `this.setState()` lets you get away with mutations. That's not really a _good_ thing. If anything, it's a holdover from an earlier era of JS, where it was much more common to use React with data structures that might be mutable. With the `useReducer/useState` hooks, the React team explicitly designed them to require immutable updates and pass in new references, otherwise they'll bail out, assuming that since it's the same reference nothing was changed and no render is needed. Some more details: - https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#immutability-and-rerendering https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-... - https://beta.reactjs.org/learn/updating-objects-in-state https://beta.reactjs.org/learn/updating-objects-in-state

AgentME 4y ago
When updating deeply-nested immutable objects, the Immer library is great. You call the `produce(immutableValue, draft => { ... })` function with some immutable value and a callback function that manipulates a mutable proxy object mimicking the immutable value, and then the function returns a new immutable value with the same changes made by the callback function. The mutable proxy object never escapes the callback, so the use of Immer stays self-contained as an implementation detail of your code without infecting your component's public API or anything. Another alternative is the "immutability-helper" library, which was originally published by the React team as "react-addons-update". It's a lighter library with less proxy magic going on, but at the cost of being more explicit: instead you create an object describing how to update an immutable value to produce a new immutable value. I've used it in the past in a few places but mostly recommend Immer over it now.
- acemarke 4y ago
  Yeah, we specifically built Redux Toolkit around Immer from the very first prototype that I wrote. I had catalogued _dozens_ of immutable update libs between 2015-2018, and Immer is simply superior to all of them. Which is why Immer is a non-negotiable part of RTK, and something we specifically tell everyone they should be using with Redux: - https://redux.js.org/style-guide/#use-immer-for-writing-immutable-updates https://redux.js.org/style-guide/#use-immer-for-writing-immu... - https://redux-toolkit.js.org/usage/immer-reducers https://redux-toolkit.js.org/usage/immer-reducers (in fact, I recently got quoted on the top of the Immer docs with a tweet I wrote saying how awesome Immer is :) https://immerjs.github.io/immer/ https://immerjs.github.io/immer/ )
  - TurningCanadian 4y ago
    Where will the Record & Tuple proposal (Stage: 2) fit in? https://tc39.es/proposal-record-tuple/tutorial/ https://tc39.es/proposal-record-tuple/tutorial/
    - acemarke 4y ago
      I'm not sure, tbh. I agree that having the ability to construct objects/arrays that are compared by nested values, rather than references, will be useful. But, given that Immer already exists, and only meaningfully requires ES6 Proxy support, I'm not sure how much of an impact the availability of Records will have. In the case of RTK specifically... Immer is built into `createSlice/createReducer`, and it's _always_ getting called even if you manually create an immutably-updated result yourself. So I don't see any real change or benefit there.
- rhacker 4y ago
  We're using something called Recoil - I'm still getting used to it, but I think it has some similarities.
- 8n4vidtmkvmk 4y ago
  i dont like proxy magic, its bitten me before. immutability helper ftw
petilon 4y ago
> React has always been designed around some Functional Programming type principles, such as immutable updates If you think React has anything to do with Functional Programming, please read this ASAP: https://mckoder.medium.com/why-react-is-not-functional-b1ed12a41323 https://mckoder.medium.com/why-react-is-not-functional-b1ed1...
- kccqzy 4y ago
  React was prototyped in Standard ML. Say what you want about whether you think it's functional enough but you can't revise history.
  - petilon 4y ago
    Whether React's implementation is functional or not has no relevance to the question of whether applications written using React are functional.
    - lttlrck 4y ago
      Where did anyone say "applications written using React are functional"?

AgentME 4y ago

When updating deeply-nested immutable objects, the Immer library is great. You call the `produce(immutableValue, draft => { ... })` function with some immutable value and a callback function that manipulates a mutable proxy object mimicking the immutable value, and then the function returns a new immutable value with the same changes made by the callback function. The mutable proxy object never escapes the callback, so the use of Immer stays self-contained as an implementation detail of your code without infecting your component's public API or anything. Another alternative is the "immutability-helper" library, which was originally published by the React team as "react-addons-update". It's a lighter library with less proxy magic going on, but at the cost of being more explicit: instead you create an object describing how to update an immutable value to produce a new immutable value. I've used it in the past in a few places but mostly recommend Immer over it now.

acemarke 4y ago
Yeah, we specifically built Redux Toolkit around Immer from the very first prototype that I wrote. I had catalogued _dozens_ of immutable update libs between 2015-2018, and Immer is simply superior to all of them. Which is why Immer is a non-negotiable part of RTK, and something we specifically tell everyone they should be using with Redux: - https://redux.js.org/style-guide/#use-immer-for-writing-immutable-updates https://redux.js.org/style-guide/#use-immer-for-writing-immu... - https://redux-toolkit.js.org/usage/immer-reducers https://redux-toolkit.js.org/usage/immer-reducers (in fact, I recently got quoted on the top of the Immer docs with a tweet I wrote saying how awesome Immer is :) https://immerjs.github.io/immer/ https://immerjs.github.io/immer/ )
- TurningCanadian 4y ago
  Where will the Record & Tuple proposal (Stage: 2) fit in? https://tc39.es/proposal-record-tuple/tutorial/ https://tc39.es/proposal-record-tuple/tutorial/
  - acemarke 4y ago
    I'm not sure, tbh. I agree that having the ability to construct objects/arrays that are compared by nested values, rather than references, will be useful. But, given that Immer already exists, and only meaningfully requires ES6 Proxy support, I'm not sure how much of an impact the availability of Records will have. In the case of RTK specifically... Immer is built into `createSlice/createReducer`, and it's _always_ getting called even if you manually create an immutably-updated result yourself. So I don't see any real change or benefit there.
rhacker 4y ago
We're using something called Recoil - I'm still getting used to it, but I think it has some similarities.
8n4vidtmkvmk 4y ago
i dont like proxy magic, its bitten me before. immutability helper ftw

petilon 4y ago

> React has always been designed around some Functional Programming type principles, such as immutable updates If you think React has anything to do with Functional Programming, please read this ASAP: https://mckoder.medium.com/why-react-is-not-functional-b1ed12a41323 https://mckoder.medium.com/why-react-is-not-functional-b1ed1...

kccqzy 4y ago
React was prototyped in Standard ML. Say what you want about whether you think it's functional enough but you can't revise history.
- petilon 4y ago
  Whether React's implementation is functional or not has no relevance to the question of whether applications written using React are functional.
  - lttlrck 4y ago
    Where did anyone say "applications written using React are functional"?