La version 16.8 permet d'utiliser des composants fonctionnels statefull.
Cette emploi passe par fonctions, les Hooks.
Auparavant, seules les composants héritant de la classe React.Component permettaient de gérer des états.
Étape par étape, suivez la mise en place d'un projet react
Vous pouvez créer votre propres hooks, simplement en faisant une fonction.
import React, { useState } from "react";
const useToggle = (initialValue) =>
{
const [ toggleValue, setToggleValue ] = useState(initialValue);
const toggler = () => setToggleValue( !toggleValue );
return [ toggleValue, toggler ];
}
export default useToggle;Ainsi, vous pourrez réutiliser votre code entre pusieurs composants. Imaginons par exemple un hook personnalisé pour s'authentifier à une API.
Certains hooks permettent d'éviter aux composants des rendus inutiles. La technique utilisée se nomme mémoïsation. Elle consiste à mémoriser certaines valeurs et les utiliser telle une mise en cache.
- Brightleaf React Hooks
- Awesome React Hooks Resources
- Collection of React Hooks
- react-fetching-library
- https://www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/
- https://medium.com/@WebReflection/demystifying-hooks-f55ad885609f
Ken C. Dodds suggère de laisser les états applicatifs aussi proches que possible du composant qui les utilisent. Il nomme cette méthodologie co-location
- https://www.toptal.com/react/optimizing-react-performance
- https://medium.com/better-programming/performance-optimization-with-react-hooks-and-memo-e3186f7ff9ab
- https://dev.to/oahehc/few-tips-to-optimizing-performance-of-react-project-5h25
La nouvelle version Context API du framework, mis à jour récemment, simplifie l'échange de props dans une hiérarchie de composants à plusieurs niveaux.
Obtenir les données d'un contexte Provider parent
import React, { useContext } from 'react'
const CurrentRoute = React.createContext({ path: '/welcome' })
const CurrentUser = React.createContext(undefined)
const IsStatic = React.createContext(false)
export default () =>
{
let currentRoute = useContext(CurrentRoute)
let currentUser = useContext(CurrentUser)
let isStatic = useContext(IsStatic)
return (
!isStatic &&
currentRoute.path === '/welcome' &&
(currentUser
? `Welcome back, ${currentUser.name}!`
: 'Welcome!'
)
)
}La tentation est forte de vouloir remplacer le framework Redux par un Context global, faisant œuvre de store.
Quid des contraintes et performances ?
Motif de conception pour de larges applications scalables
Pourquoi devrions nous tous utiliser la programmation réactive ?
La réactivité des Observable peut également nous intéresser dans la gestion des états applicatif.
Petite révision sur l'Observable RxJS
Plongée dans le code des Observable.
La classe Subject étend Observable.
Quelques exemples intéressant d'usage des streams reactifs.
Est-il possible de s'approprier des streams RxJS pour gérer les state d'une application react ?