facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
227.48k stars 46.41k forks source link

Remove references to legacy class-based component architecture in error messages #30440

Open ADTC opened 1 month ago

ADTC commented 1 month ago

We've moved to function-based components using hooks a very long time ago, yet we still see error messages such as these:

Maximum update depth exceeded. This can happen when a component repeatedly calls 
setState inside componentWillUpdate or componentDidUpdate. React limits the 
number of nested updates to prevent infinite loops.

I don't even know how to debug and resolve an error like this, because we're not using class-based components. It's really very annoying, because we don't have a single instance of setState, componentWillUpdate or componentDidUpdate in our code. These are remnants of the legacy class-based component architecture.

Copilot AI suggested something like this:

Maximum update depth exceeded. This can happen when a component repeatedly updates 
state using the useState hook inside the useEffect hook. React limits the 
number of nested updates to prevent infinite loops.

or

Maximum update depth exceeded. This can happen when a component repeatedly updates 
state using the useState hook directly inside the component body. React limits the 
number of nested updates to prevent infinite loops.

I'm not sure if either one is correct, but it's definitely a start.

Related:

surenpoghosian commented 1 month ago

@ADTC That can happen if you somehow update your state on every render, to prevent such a behavior you can use useCallback combined with memo(), wrap your component inside memo like this export default memo(YourComponent), and also wrap all your functions defined inside that component into useCallback, see the docs here

I think it also can happen when you call some component or a react function recursively, check for such parts in your code.

Try out and let me know if it helped or not.

Thank you !

requinDr commented 1 month ago

@surenpoghosian I think this issue is about the error message in itself and not his code.

I agree that error messages shouldn't assume we are on a class-based architecture anymore. The first suggestion is what applied to most of my encounter with that error, so I find it good

ADTC commented 1 month ago

Hi @surenpoghosian:

As @requinDr has correctly observed, yes my issue is about the error message which is still using severely outdated terms which are very unhelpful in new projects that no longer use those terms.

And yes, such a generic error (even with correct terms) often isn't enough to pinpoint the exact location where it happens. The developer is left to find the needle in a haystack all by oneself.