#React native game github code
If you don't memoize correctly, you might up passing props over the bridge for every single render, causing the bridge to be very occupied.# Then follow the Expo prompts to run on a device or simulatorįor an even quicker start, download the Expo Go app and scan this QR code with your mobile device. They can be memoized, so React compares the props for shallow-equality and only passes them over the bridge if they are different than the props from the last render. ) have to pass props to native via the bridge. Doing too much work on the JavaScript thread can be compared to a high ping in a video game - you can still look around smoothly, but you can't really play the game because every interaction takes too long. While animations and performance intensive tasks are scheduled on native threads, your entire business logic runs on a single JavaScript thread, so make sure you're doing as little work as possible there. You can however apply similar techniques for class components, just be aware that this will result in a lot more code. In general, function components can be optimized more easily due to the concept of hooks. Use the useCallback hook to memoize a function.Also use useMemo to cache heavy computations, such as array operations, filtering, etc. Use the useMemo hook to memoize arrays and objects which will keep their reference equality (and won't get re-created on each render) as long as the dependencies (second argument) stay the same.For this very reason, memoization exists. This means when you create an object in the first render, it is not reference-equal to the object in the second render. If you create objects in your render function, they will be re-created on every single render. There are libraries like deep-equal to compare objects by actual equality, but that's not shallow equality anymore. Reference comparisons simply compare the memory address of the variable, so only o1 = o1 would be true in the above code example. Numbers, strings and booleans are value types, which means they can be compared by value:Ĭonst o1 = const equal = o1 = o2 // false When a pure component re-renders, it compares the previous props to the current props and checks if they are shallow-equal. Often those variables even go over the Bridge and make your app slow. When you pass those variables down to pure components via props, they will still re-render even though the props are logically the same. While this is not a problem for value types, this causes reference types to be different on every render. Pure ComponentsĪ Pure Component (or a mo component) does not re-render if it's props are shallow equal.Įach variable you create in your render function will get re-allocated on each render. You don't want to run a lot of operations in those renders for very obvious reasons - so no heavy filtering, no list operations, etc.
A re-render occurs when state changes, redux dispatches some action, or when the user types into a text input (re-render for every single key press).
It's important to memoize heavy computations as well as arrays and object creations so that they don't get re-created on every render.
Returning the cached result when the same The results of expensive function calls and Is an optimization technique used primarily