Is it normal practice to nest .map() methods in React components?

Question

React

There is component #1, which maps several other components #2. And each of component #2, map has a small list of components.
I will have to do complex filtering in the future, and I'm afraid that such nesting of maps can affect performance.
And in general, is it possible to do this? If so, what is the nesting limit?

Answer 1

fine.
It doesn't make much of a difference how you output the list, through a map or something else. If you need to withdraw all these 20? components - you must bring them out and you will have the main brakes not during the operation of the .map, but during the rendering of all this to the page and updates later. Use stable Ids if you're worried.
You have to worry about performance when something starts to slow down. Well, or at least when you did profiling and you didn’t like something there.
If you really, really want to do everything as optimally as possible - take mobx and mobx-react with its free optimization out of the box, and break everything down into fairly small objects and components.