DEV Community

Discussion on: React Native Performance Optimisation With Hooks

Collapse
 
kylessg profile image
Kyle Johnson • Edited

Following all of this I'd like to clarify a couple things.

Moving those inline functions up to consts and usecallback will make little to no difference, regardless of usecallback, those functions are still getting redeclared every render which would be the main hit you'd get. The real performance boost here is memoising your child components which is kind of like the old should component update / pure component optimisation.

To prove this I used a tool I made and followed the tutorial, the avg render time for the screen only changed once memoising the child components.

What the graph demonstrates is that if multiple renders are triggered the first mount ofcourse will always take a while, but further re-renders for the entire screen are massively optimised.

Collapse
 
alebagran profile image
alebagran

Hey, which perf tool did you use here?

Collapse
 
kylessg profile image
Kyle Johnson
Collapse
 
alebagran profile image
alebagran • Edited

The after code of the first solution is still wrong, because the functions will still have new references every time the functional component is called, since both awesomeChildListRenderItem and awesomeChildListKeyExtractor will be redeclared.

One option to solve this is to declare the functions outside of the component. But in the case of awesomeChildListRenderItem, it is using setChildState, which can only be accessed from within the component scope. In this particular case only, you can use useCallback instead.

Collapse
 
ltsharma profile image
Lakshmeesha

That's true with respect to th example i have in this article, in real case, its not fissile to use each & every function outside component, functions will somehow depends on the state & in that case that function will be called.
that's what the dependency array of useCallback does, if there is change in dependency, useCallback returns new function.