Intégrer les changements de l'audit de perf

[louptheron]

Commit : lucasteisseire@06b520e

Explication :

Almost all problems are related to incorrect use of hooks, or not at all with them. More: react-components work in such a way that every time the props included in the component change or when the internal state (state) changes, the react-component is redrawn (rerender is executed). More precisely, the function that makes up the body of the react component is re-executed, as a result of which it returns the new state of the component for rendering to the DOM. In our case, every time data was requested from the server, it got into the react components and forced them to be executed again. At the same time, many functions and variables are written inside the component, which create new with each rendering. But since the old entities were still required, the javascript machine's garbage collector could not remove them. In most cases, such problems are solved by the correct use of hooks that allow you to remember and return previous states in separate parts of the code until new versions of incoming variables arrive there.

An example of such code (on the left - the old version of the code, on the right - the new one).

As you can see, earlier the useState hook was used here, a new instance of the VectorSource class was passed to it as a parameter. In terms of the end result, both options return the same thing - the first instance of that class to be created. But the difference is what happens with each rendering (after all, at this point, the entire code of the component is re-executed). In the first case, with each re-rendering, a new instance of the VectorSource class is created, because, although useState returns the first remembered result, still useState is a function, and in order for it to return something, it must be called (and here it is called), and to to call it, you must, among other things, pass the necessary parameters to it (in our case, this is one parameter - a new instance of the VectorSource class), and in order to pass a parameter, you need to calculate it. That is, every time we create a new instance unnecessarily.

The second option - using useMemo - works a little differently: in useMemo it is passed to a new instance of the VectorSource class, and the function resulting in a new instance of the VectorSource class. But the difference here is that although a new argument function is created each time, it requires significantly less resources than creating a new instance from a class. Moreover, these functions are not called every time

Another code example:

A new arrow function is created here every time

const showSelectedSelectorToShowedTracks = vesselsFeatures => {

Arrow functions differ from regular functions in that they use more complex closures. In fact, all external variables inside the bodies of such functions are, as it were, "remembered". Such functions often live in memory much longer than regular functions, and if many of them are created, this leads to memory leaks. Such functions (and any others inside react-components) should be wrapped in useCallback hooks.

From the outside, it may seem that hooks are not particularly needed, because as mentioned above, new arguments are still passed to their call every time, the arguments are still created. But the essence of hooks is not this, nothing is created at all, but they return the same entities, if the parameters for them have not changed. This is important to avoid re-rendering for child components that are passed arguments. After all, if every time a new function or some object is created and passed, then the child component will be redrawn, requiring additional resources. And when the hook returns the old instance, the parameters for the child component do not change either.

[thoomasbro]

Je pense que l'ajout de la règle jsx-no-bind dans le linter permettrait de détecter certains de ces problèmes. Ce n'est pas une règle par défaut.

Je pense qu'on pourrait rajouter quelques règles: proposition dans la PR #923

[louptheron]

Vu avec les snapshot de mémoires sur FF :

Il semblerait qu'il y ait un leak lors de la copie des vessels dans le reducer.