refacto: useCallback + encapsulation of map instantiation #4
Conversation
src/hooks/useMap.tsx
Outdated
| // C'est beaucoup mieux de renvoyer des fonctions dont la référence ne change pas a chaque render | ||
| // ça évite des re-render inutile downstream. | ||
| // voir: https://docs.onyxia.sh/contributing/onyxia/dependencies#avoiding-useless-re-render-of-components | ||
| const setNewCenterAndNewZoom = useConstCallback((coordinates: [number, number], zoom: number) => { |
There was a problem hiding this comment.
Carrément pour les callback 💯
Je vais utiliser les listes vides en tant que deps, et éviter d'installer une nouvelle lib pour le moment
There was a problem hiding this comment.
WARNING WARNING WARNING:
Ce n'es pas du tout la même chose d'utilise useCallback avec une liste de dependence vide et d'utiliser useConstCallback!
Je t'enjoint a étudier attentivement cette exemple, il est fondamentale pour une bonne compréhention de React:
https://stackblitz.com/edit/react-ts-fyrwng?file=index.tsx
Si tu ne veut pas inclure une nouvelle dep, je comprend, mais sache que que useConstCallback va bientôt faire son apparition dans React sous l'appélation useEvent:
reactjs/rfcs#220
Si tu ne veut pas dépendre de powerhooks tu peut copier coller le code du hook:
https://github.com/garronej/powerhooks/blob/main/src/useConstCallback.tsx
There was a problem hiding this comment.
Si tu utilise une liste de dépendence vide dans useCallback, la première view est capturé et jamais mise a jour. Si tu met la view dans le tableau des dépendence, la référence de ta fonction va changer a chaque fois que la view est updater.
Avec useConstCallback tu as toujours la même rérérence de fonction ET en même temps c'est toujours la derinère la view la plus frèche qui est utiliser au moment de l'execution de la fonction.
maximallain
changed the title
| @@ -22,7 +24,9 @@ const LAYER_TO_OPENLAYER_LAYER: { [key in AvailableLayer]: BaseLayer } = { | |||
| "aiPrediction": aiPredictionLayer, | |||
| }; | |||
|
|
|||
| const useStyles = makeStyles()(theme => ({ | |||
| const lightTheme = fr.getColors(false); | |||
There was a problem hiding this comment.
Le fond de carte ne change jamais donc utilise le light theme
src/hooks/useMap.tsx
Outdated
| "The map object should have been instantiated (it is after fist render) by the time this function is called", | ||
| ); | ||
|
|
||
| map.addLayer(layer); |
There was a problem hiding this comment.
Là du coup grâce au assert tu n'a plus besoin du point d'intérogation
src/hooks/useMap.tsx
Outdated
| // C'est beaucoup mieux de renvoyer des fonctions dont la référence ne change pas a chaque render | ||
| // ça évite des re-render inutile downstream. | ||
| // voir: https://docs.onyxia.sh/contributing/onyxia/dependencies#avoiding-useless-re-render-of-components | ||
| const setNewCenterAndNewZoom = useConstCallback((coordinates: [number, number], zoom: number) => { |
There was a problem hiding this comment.
WARNING WARNING WARNING:
Ce n'es pas du tout la même chose d'utilise useCallback avec une liste de dependence vide et d'utiliser useConstCallback!
Je t'enjoint a étudier attentivement cette exemple, il est fondamentale pour une bonne compréhention de React:
https://stackblitz.com/edit/react-ts-fyrwng?file=index.tsx
Si tu ne veut pas inclure une nouvelle dep, je comprend, mais sache que que useConstCallback va bientôt faire son apparition dans React sous l'appélation useEvent:
reactjs/rfcs#220
Si tu ne veut pas dépendre de powerhooks tu peut copier coller le code du hook:
https://github.com/garronej/powerhooks/blob/main/src/useConstCallback.tsx
src/hooks/useMap.tsx
Outdated
| // C'est beaucoup mieux de renvoyer des fonctions dont la référence ne change pas a chaque render | ||
| // ça évite des re-render inutile downstream. | ||
| // voir: https://docs.onyxia.sh/contributing/onyxia/dependencies#avoiding-useless-re-render-of-components | ||
| const setNewCenterAndNewZoom = useConstCallback((coordinates: [number, number], zoom: number) => { |
There was a problem hiding this comment.
Si tu utilise une liste de dépendence vide dans useCallback, la première view est capturé et jamais mise a jour. Si tu met la view dans le tableau des dépendence, la référence de ta fonction va changer a chaque fois que la view est updater.
Avec useConstCallback tu as toujours la même rérérence de fonction ET en même temps c'est toujours la derinère la view la plus frèche qui est utiliser au moment de l'execution de la fonction.
No description provided.