Fix useIsomorphicLayoutEffect usage in React Native environments

[aryaemami59]

Overview

It looks like React Native was not using useLayoutEffect which was causing nested component updates to not get properly batched when using the connect API.

This PR:

• Fixes useIsomorphicLayoutEffect usage in React Native environments.
• Fixes Connected children components might have mapStateToProps not called #2150.

Possible related issues: #1313, #1444, #1510, #1436.

I did test the actual build with yalc, React Native, Expo and Expo web seem to be working properly. We can probably get rid of src/utils/useIsomorphicLayoutEffect.native.ts file, so let me know if you want me to do that I can include it in this PR or a separate one.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[markerikson]

sigh of course it was the useLayoutEffect issue, again.

Yeah, we bundle now, so that .native file is useless.

[aryaemami59]

@markerikson hopefully this'll be the end of it :), just wondering do you think I should also switch the target for the main entry point from es2020 to esnext?

[aryaemami59]

@sdg9 Thanks for the repro, it made debugging very easy!

[sdg9]

I'm rephrasing #2150 (comment) with the fix of this PR in my own words as I want to make sure I understand what is going on.

1. Before react-redux v9 you used a .native.js suffix to differentiate behavior for ReactNative. In ReactNative useIsomorphicLayoutEffect was explicitly set to useLayoutEffect, while the other file had DOM vs server logic.
2. With the react-redux upgrade to v9, the npm artifact was pre-bundled to a single js file. This change eliminated the use of the native.js suffix, which inadvertently caused React Native to be handled the same way as server environments (using useEffect) as react-native is not DOM based.
3. With this PR ReactNative once again uses useLayoutEffect.

Is this an accurate understanding?

Just curious, diving more into # 2, it seems like the impetus of having a conditional driving useIsomorphicLayoutEffect is to differentiate server environments vs all others (based on comments in the modified file on how useLayoutEffect triggers warnings on servers).
Would it make more sense to structure the conditional logic to something like the following?

const isServer = /* some logic to reliably check if Node.js server, if such a thing exists */
export const useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect

I ask because had it been written this way this issue would never have ocurred when the native.js file was dropped, React-Native would have defaulted to the client behavior rather than the server behavior.

I can understand if this is easier said than done, for example I imagine it's easier/more consistent to check if we're running in a DOM vs react-native environment than to check if it's Node.js/server but I'm not certain, hence the question.

[markerikson]

Yep, that's a good summary. (And ironically, that warning is going away in React 19.)

Yeah, tweaking the conditional that way would make sense, I think.

[aryaemami59]

@markerikson Do you want me to include further tweaks in this PR or separate?

[sdg9]

What about a two pronged approach? Move forward with this PR as-is since we know it resolves the issue. This will unblock RN consumers like myself immediately and return behavior back to how things were in v8.x for RN
Then if desired discuss long term whether the conditional makes sense to keep as-is or tweak it based on my question which is more of a forward looking potential preventative measure.

[markerikson]

Okay, out in https://github.com/reduxjs/react-redux/releases/tag/v9.1.1 !