This may happen when the parent component re-renders (parent state changes). mo: helping memoize with parent componentsĮven when you are properly preventing your component to re-render based on the proper usage of useSelector there are still situations in which it can get rendered unnecessarily. On top of that, this approach helps performance by reducing the number of times the logic inside the selector is triggered.Ģ. Use reselect or a similar library that returns multiple values in one object, but only returns a new object when one of the values has changed. Please bear in mind that this may hit the performance since shallowEqual may be heavy in terms of processing (depending on the object shape). Feel free to implement your own or to use the already existing shallowEqual. You can specify a function that will be used to compare the result of the selector. Remember, the main goal is to avoid re-rendering when it is not strictly necessary (because a value used for rendering purposes changed). In case you have the need to compare objects and you can not use values instead, there are still 2 options one can use. Because of the React update batching behavior used in React Redux v7, a dispatched action that causes multiple useSelector()s in the same component to return new values should only result in a single re-render. Each call to useSelector() creates an individual subscription to the Redux Store. You may call useSelector() multiple times within a single function component. There is no inconvenience in creating a new useSelector for each value. useSelector will be comparing primitives in this case, so only if the string value is different the render will be triggered. This will only render if the values for the keys name and photo change. In order to avoid this unnecessary render please consider the following approach: If the user’s state object reference changes (even maintaining the values for name and photo keys) the component will re-render (it is comparing 2 different objects references). Destructuring: Best way to avoid unnecessary renderingĪs mentioned previously, the useSelector will use strict reference equality to decide whether a render has to be triggered or not. UseSelector is called every time an action is dispatched to the store. For primitive values, this will have no major impact but please take this into consideration when working with objects (including arrays). If the result is different the component will be re-rendered. ![]() Please note that useSelector will do a reference comparison (=) of the previous selector result. The selector is approximately equivalent to mapStateToProps and will be called when the store state changes. useSelector: The hook which allows you to extract data from the Redux Store. This article aims to describe the best options the Mobile team at Nuvolar considers when using functional components that connect to the Redux Store thanks to the useSelector hook.Īfter previous discussions, the team decided to set a goal: to write this “Best Practices” article to make sure that, from now on, we all use the same, correct and consistent, approach, which we are explaining in detail here. Here we’ll show you an intricate guide on how to correctly apply useSelector to efficiently render components, how to set up the custom compare function to avoid rendering and how to memoize components, helping performance by reducing the number of times the logic inside the selector is triggered
0 Comments
Leave a Reply. |