react-boilerplate

react-boilerplate

🔥 A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Member Since 4 years ago

Everywhere

Experience Points
0
follower
Lessons Completed
0
follow
Best Reply Awards
7
repos
Activity
Oct
10
6 days ago
Activity icon
fork

QuachTrienHuy1107 forked react-boilerplate/react-boilerplate

⚡ :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
QuachTrienHuy1107 MIT License Updated
fork time in 5 days ago
Activity icon
fork

riazosama forked react-boilerplate/react-boilerplate-cra-template

⚡ :fire: Setup Create React App with React Boilerplate. Highly scalable & Best DX & Performance Focused & Best practices.
riazosama MIT License Updated
fork time in 5 days ago
Activity icon
fork

RuChuanLin forked react-boilerplate/react-boilerplate

⚡ :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
RuChuanLin MIT License Updated
fork time in 6 days ago
Oct
9
1 week ago
Oct
8
1 week ago
Activity icon
fork

mrjelveh forked react-boilerplate/react-boilerplate

⚡ :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
mrjelveh MIT License Updated
fork time in 1 week ago
Activity icon
fork

Hepheir forked react-boilerplate/react-boilerplate

⚡ :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
Hepheir MIT License Updated
fork time in 1 week ago
Oct
7
1 week ago
Activity icon
fork

MartinSparksWaggel forked react-boilerplate/react-boilerplate

⚡ :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
MartinSparksWaggel MIT License Updated
fork time in 1 week ago
Activity icon
fork

Niiaz-Gabidullin forked react-boilerplate/react-boilerplate

⚡ :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
Niiaz-Gabidullin MIT License Updated
fork time in 1 week ago
Oct
6
1 week ago
Activity icon
fork

beholdenkey forked react-boilerplate/react-boilerplate

⚡ :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
beholdenkey MIT License Updated
fork time in 1 week ago
Activity icon
fork

MrChris017 forked react-boilerplate/react-boilerplate-cra-template

⚡ :fire: Setup Create React App with React Boilerplate. Highly scalable & Best DX & Performance Focused & Best practices.
MrChris017 MIT License Updated
fork time in 1 week ago
Activity icon
fork

almo99 forked react-boilerplate/react-boilerplate-cra-template

⚡ :fire: Setup Create React App with React Boilerplate. Highly scalable & Best DX & Performance Focused & Best practices.
almo99 MIT License Updated
fork time in 1 week ago
Activity icon
issue

BenLorantfy issue comment react-boilerplate/redux-injectors

BenLorantfy
BenLorantfy

React 16.13 throws a warning when "nesting" useInjectReducer calls

After upgrading to React 16.13, we started getting this warning in many places:

image

More info about it in the 16.13 announcement post.

Here's how it happens in our case:

  • Have ParentContainer with useInjectReducer
  • Have ChildContainer with useInjectReducer
  • When ChildContainer's useInjectReducer is called, the warning appears.

This happens because calling useInjectReducer calls store.replaceReducer synchronously during the render of the ChildContainer.

From what I understand, we're not technically updating the state of a component during the render of another component but we are updating the ReactReduxContext - which contains the store and is also consumed by ParentContainer via useStore inside useInjectReducer - so that must be enough to trigger the warning.

The suggestion by the React team is to "wrap the setState call into useEffect".

Up until September of last year, this is exactly how useInjectReducer worked: injection happened inside an effect. However, doing the injection inside an effect caused a different issue: we couldn't guarantee that the reducer or saga was always injected before a relevant action is dispatched. (Discussed in RBP here.)

Does anyone have any thoughts or suggestions regarding how we could fix this?

BenLorantfy
BenLorantfy

@joejordan this pattern is unfortunately not possible anymore without getting the warning here.

The reason this used to work was because the reducer was being injected during the render. Injecting a reducer is usually a side-effect, which is what react is warning about here.

You would have to re-structure the code in this case so useSelector is called within a child of FeatureAppLoader. You could also try the new createManager api which would not have this problem.