Astuces React essentielles que tout développeur doit connaître

React est incroyablement puissant, mais le maîtriser signifie aller au-delà des bases et apprendre quelques astuces moins connues pour rationaliser le développement. Voici un aperçu de mes 20 astuces React préférées qui peuvent augmenter votre productivité et vous aider à écrire un code plus propre et plus efficace. Passons directement aux exemples !

---

1. Évaluation de court-circuit pour le rendu conditionnel

Évitez les instructions if verbeuses pour le rendu conditionnel avec évaluation de court-circuit.

{isLoading && <Spinner />}

Cela rend le seulement lorsque isLoading est vrai, gardant votre JSX propre.

---

2. Noms de classe dynamiques avec bibliothèque de noms de classe

La bibliothèque de noms de classes facilite l'application conditionnelle de classes.

npm install classnames

import classNames from 'classnames';

const buttonClass = classNames({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

<button className={buttonClass}>Click Me</button>

---

3. Mémoriser des calculs coûteux avec useMemo

Si un calcul est coûteux, mémorisez-le pour que React ne recalcule pas inutilement.

const sortedData = useMemo(() => data.sort(), [data]);

Ceci recalcule sortedData uniquement lorsque les données changent.

---

4. Entrée anti-rebond avec useEffect

Évitez les rendus constants en anti-rebondissant les modifications d'entrée.

const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');

useEffect(() => {
  const handler = setTimeout(() => setDebouncedValue(value), 500);
  return () => clearTimeout(handler);
}, [value]);

<input value={value} onChange={(e) => setValue(e.target.value)} />

---

5. Hooks personnalisés pour une logique réutilisable

Encapsulez la logique dans un hook personnalisé pour la réutiliser dans tous les composants.

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

const Component = () => {
  const data = useFetch('/api/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

---

6. Chargement paresseux de composants avec React.lazy

Optimisez le temps de chargement en divisant vos composants.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

---

7. Accès aux accessoires ou à l'état précédent avec useRef

Pour accéder aux valeurs d'état précédentes, utilisez useRef.

const [count, setCount] = useState(0);
const prevCount = useRef(count);

useEffect(() => {
  prevCount.current = count;
}, [count]);

console.log(`Previous: ${prevCount.current}, Current: ${count}`);

---

8. Évitez les nouveaux rendus en passant des fonctions à useCallback

Si une fonction n'a pas besoin d'être modifiée, mémorisez-la avec useCallback.

const increment = useCallback(() => setCount(count + 1), [count]);

---

9. Accessoires de déstructuration pour un code plus propre

Déstructurez les accessoires directement dans les paramètres de la fonction.

const User = ({ name, age }) => (
  <div>{name} is {age} years old</div>
);

---

10. React.Fragment pour regrouper des éléments sans divisions supplémentaires

Enveloppez les éléments sans ajouter de nœud DOM supplémentaire.

<>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</>

---

11. Limites d'erreur pour détecter les erreurs JavaScript

Détectez les erreurs dans les composants enfants pour éviter que l'ensemble de l'application ne plante.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

Jagroop2001 (Jagroop) · GitHub

?‍? Développeur Full Stack | ? Développeur d'apprentissage automatique | ? Relations avec les développeurs Pro – ? Disponible à la location - Jagroop2001

github.com

12. Utilisation des PropTypes pour la validation des accessoires

Détectez les bugs tôt en définissant les types d'accessoires.

{isLoading && <Spinner />}

---

13. Réducteurs d'état avec useReducer

Pour une logique d'état complexe, useReducer peut être plus efficace.

npm install classnames

---

14. useLayoutEffect pour les manipulations DOM

Exécutez les effets après les mises à jour du DOM mais avant la peinture.

import classNames from 'classnames';

const buttonClass = classNames({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

<button className={buttonClass}>Click Me</button>

---

15. Encapsuler la logique d'état avec le contexte et useContext

Créez un état global sans perçage d'accessoires.

const sortedData = useMemo(() => data.sort(), [data]);

---

16. Évitez les définitions de fonctions en ligne dans JSX

La définition de fonctions en ligne provoque un nouveau rendu. Définissez-les plutôt à l’extérieur.

const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');

useEffect(() => {
  const handler = setTimeout(() => setDebouncedValue(value), 500);
  return () => clearTimeout(handler);
}, [value]);

<input value={value} onChange={(e) => setValue(e.target.value)} />

---

17. Utilisez le chaînage facultatif dans JSX pour un accès sécurisé à la propriété

Gérez les valeurs nulles ou non définies avec élégance.

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

const Component = () => {
  const data = useFetch('/api/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

---

18. Utilisez la clé Prop pour éviter les problèmes de rendu

Utilisez toujours des clés uniques lors du rendu des listes.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

---

19. Exporter des composants avec des exportations nommées pour un meilleur contrôle des importations

Les exportations nommées facilitent l'importation de composants spécifiques.

const [count, setCount] = useState(0);
const prevCount = useRef(count);

useEffect(() => {
  prevCount.current = count;
}, [count]);

console.log(`Previous: ${prevCount.current}, Current: ${count}`);

Puis importez si nécessaire :

const increment = useCallback(() => setCount(count + 1), [count]);

---

20. Modèles de composants réutilisables : composants d'ordre supérieur (HOC)

Enveloppez les composants avec des HOC pour ajouter une logique supplémentaire.

const User = ({ name, age }) => (
  <div>{name} is {age} years old</div>
);

---

Maîtriser ces astuces vous aidera à écrire du code React plus concis, lisible et efficace ! Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!