In general, the notion of "declaring functions in render is bad for perf" is a result of several things: - Declaring functions (especially arrow functions) _ma

In general, the notion of "declaring functions in render is bad for perf" is a result of several things: - Declaring functions (especially arrow functions) _may_ have had a more noticeable cost in older JS engines - Misunderstandings about how React's rendering works. When a component renders, React recursively renders all its descendants by default, regardless of whether any of their props have changed or not. New prop references only matters when you are trying to optimize perf by skipping re-renders based on prop reference comparisons (ie, `PureComponent` and `React.memo()`. - Highly aggressive lint rules, such as the AirBnb ruleset, which include the "no arrow functions in render" rule as a warning or error. As this post demonstrates, declaring functions isn't zero-cost, but in general the cost is meaningless and it's not something that should be avoided. Micro-benchmarks need to be taken with a grain of salt, but it's nice to have some actual numbers to look at. Some other prior relevant articles for reference: - https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-becau... - https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578 https://cdb.reacttraining.com/react-inline-functions-and-per...