Stop this, use this instead : Top 5 des bonnes pratiques JS / React

Stop this, use this instead : Top 5 des bonnes pratiques JS / React

27 Nov 2023

1 - Optimisation des vérifications de paramètres

❌ Arrêtez ceci :

1if (userRole !== 'admin' && userRole !== 'moderator' && userRole !== 'user') {
2  console.error("Rôle utilisateur invalide")
3}

✅ Utilisez plutôt :

1const allowedRoles = ['admin', 'moderator', 'user'];
2
3if (!allowedRoles.includes(userRole)) {
4  console.error('Rôle utilisateur invalide');
5}

2 - useReducer pour les états basculants

❌ Arrêtez ceci :

1const [isModalVisible, setIsModalVisible] = useState(false)
2
3setIsModalVisible((prevState) => !prevState)

✅ Utilisez plutôt :

1const [isModalVisible, toggleModalVisibility] = useReducer((currentValue) => !currentValue, false)
2
3toggleModalVisibility()

3 - Objets déstructurés en tant que paramètres

❌ Arrêtez ceci :

1const processUserData = (firstName, lastName, age, email) => {
2  ....
3}
4
5processUserData("Toto", "Tata", 35, "tototata@gmail.com");

✅ Utilisez plutôt :

1const processUserData = ({ firstName, lastName, age, email }) => {
2  ....
3}
4
5processUserData({
6  firstName: "Toto",
7  lastName: "Tata",
8  age: 35,
9  email: "tototata@gmail.com"
10});

4 - Clonage efficace d'objets

❌ Arrêtez ceci :

1const originalObject = {
2  key1: 'value1',
3  key2: {
4    key2a: () => console.log('value2a')
5  }
6}
7
8const objectCopy = originalObject

✅ Utilisez plutôt :

1const originalObject = {
2  key1: 'value1',
3  key2: {
4    key2a: () => console.log('value2a')
5  }
6}
7
8const objectCopy = structuredClone(originalObject)
9// ou
10const objectCopy = {...originalObject}

5 - Utilisez Set pour gérer efficacement les valeurs uniques

❌ Arrêtez ceci :

1const uniqueItemsArray = ['Apple', 'Banana', 'Orange', 'Banana', 'Apple'];
2
3// Ajout de nouveaux éléments au tableau
4uniqueItemsArray.push('Grapes');
5uniqueItemsArray.push('Orange'); // Existe déjà mais ajouté de nouveau
6
7// Vérification de l'existence d'une valeur dans le tableau
8const hasGrapes = uniqueItemsArray.includes('Grapes');
9
10// Suppression d'un élément du tableau
11uniqueItemsArray = uniqueItemsArray.filter(item => item !== 'Banana');
12
13uniqueItemsArray.forEach(item => {
14  console.log(item);
15});

✅ Utilisez plutôt :

1const uniqueItemsSet = new Set(['Apple', 'Banana', 'Orange', 'Banana', 'Apple']);
2// affichera ['Apple', 'Banana', 'Orange']
3
4// Ajout de nouveaux éléments uniques à l'ensemble
5uniqueItemsSet.add('Grapes');
6uniqueItemsSet.add('Orange');
7
8// Vérification de l'existence d'une valeur dans l'ensemble
9const hasGrapes = uniqueItemsSet.has('Grapes');
10
11// Suppression d'un élément de l'ensemble
12uniqueItemsSet.delete('Banana');
13
14// Parcours de l'ensemble
15for (let item of uniqueItemsSet) {
16  console.log(item);
17}

Mon LinkedIn

Mon X

Mon portfolio

Voir plus d'articles