3 ms·
> Kitze was kidding (I hope), but for a while this was a very real debate. Especially when render props were first taking off. Since then, Hooks have made anony
by lucasmullens 7y ago
> Kitze was kidding (I hope), but for a while this was a very real debate. Especially when render props were first taking off. Since then, Hooks have made anonymous (inline) functions even more popular.
Isn't this missing the point? It's not about the overhead of declaring a new function, it's that you've made one of the props change on every render, so your child element needs to run its render function every time. The render function of Number only has to create a single H1 element which doesn't seem like a good test.
And the ExpensiveComponent example is strange to me. It's being memoized, so what exactly is the point?
- bfrydl 7y ago> Isn't this missing the point? It's not about the overhead of declaring a new function, it's that you've made one of the props change on every render, so your child element needs to run its render function every time. This is the larger issue, but the `useCallback` hook can be used to memoize anonymous render functions based on given values to avoid this problem.
- acemarke 7y agoPer my comment, by default it doesn't matter whether props change or not. If the parent component renders, its children will too. It's only when you're _trying_ to optimize the child that the new function reference matters.