Using Immutable.JS with Redux and React hooks

[aachauhan2009]

What docs page is being added or updated?

Using Immutable.JS with Redux

• Section: https://redux.js.org/recipes/recipe-index
• Page: https://redux.js.org/recipes/using-immutablejs-with-redux/#use-a-higher-order-component-to-convert-your-smart-components-immutablejs-props-to-your-dumb-components-javascript-props

For Updating Existing Content

What updates should be made to the page?

Can anyone please update best practices for using immutable js with hooks? The current approach which is using hoc is causing useEffect to run if non-primitive data is given as dependency array.

Should we create a separate view for each and every component which is using hooks with dependency?

Do these updates change any of the assumptions or target audience? If so, how do they change?

The target audience for this document change doesn't change as it will be targeted for the react community.

Here is simple example i created in codesandbox

[markerikson]

At this point, we now officially recommend not using Immutable.js.

Given that, I don't have any plans to update that docs page, and in fact will likely end up removing it as part of the ongoing docs rewrite.

(Also, note that this sounds more like a usage question than anything else.)

Looking quickly at your sandbox, it looks like the HOC is calling .toJS() every time it renders, without trying to memoize the results. toJS() always results in new references being created, so yes, that will certainly cause any downstream comparisons to think that the data has changed. That sort of issue is one of the reasons why we're recommending against using Immutable.js.

[FabKremer]

@aachauhan2009 at NeoCoast we've worked to solve this issue. Feel free to check it out! ⭐️