Pourquoi viser la programmation fonctionnelle avec React

Choisir le thème

기록 상세 정보를 불러오는 중입니다.

아티클을 불러오는 중입니다.

Pourquoi viser la programmation fonctionnelle avec React | chaen

Catégorie	Frontend (React, etc.)	Backend (Node.js, Java, etc.)
Principaux éléments à considérer	Optimisation du rendu UI, suivi des changements d'état	Performance, gestion des ressources, flux transactionnel
Paradigme approprié	Programmation fonctionnelle	Programmation orientée objet
Avantages	Facilité de test, suivi des changements d'état avec immuabilité, réutilisabilité des composants	Structure basée sur les classes pour clarifier les responsabilités, maintien de l'état, conception centrée sur la connexion, facilité de structuration des logiques complexes
Inconvénients	Gênant pour des flux de calculs complexes, baisse de lisibilité avec une utilisation excessive des hooks	Difficulté à séparer l'état lors des tests, structure complexe pour optimiser le rerendu

Références

React s'est orienté vers la programmation fonctionnelle (Functional Programming, FP) ces dernières années. Il exploite activement les avantages de l'approche fonctionnelle, des composants UI simples jusqu'à la structure d'applications complexes. Cet article se propose de systématiser les raisons pour lesquelles React vise la programmation fonctionnelle et chacune de ses justifications.

👍 Facilité de test

Le cœur de la programmation fonctionnelle est la « fonction pure ». Une fonction pure est une fonction qui donne toujours le même résultat si elle reçoit les mêmes entrées et qui n'altère pas l'état externe.

Avantages des tests des composants fonctionnels

Minimisation des dépendances : Si un composant ne dépend pas de l'état externe ou des effets de bord, le résultat de ce composant peut être prédit uniquement par l'entrée (props).
Optimisation des tests unitaires : Les besoins en mock ou stub diminuent, ce qui rend le code de test plus court et plus facile à comprendre.
Renforcement de la réutilisabilité : Les Hooks ou Helpers fonctionnels peuvent être utilisés indépendamment dans plusieurs composants.

Comparaison avec des exemples concis

Test d'un composant de type classe :

js

Composant fonctionnel :

js

Les composants fonctionnels permettent de séparer la logique et le rendu, ce qui permet de tester chacun de manière indépendante.

Exemple de fonction pure :

js

👍 Commodité de l'optimisation

Dans la programmation fonctionnelle, les données sont traitées comme immuables.

Principe essentiel de l'immuabilité

Immuabilité de la gestion d'état : plutôt que de modifier directement un objet existant, un nouvel objet est créé pour changer l'état.
Efficacité de comparaison de référence (Comparaison superficielle) : l'optimisation est facilitée en ne comparant que les références des objets.
Prévisibilité : les valeurs ne changent pas, permettant de maintenir un flux prévisible.

Pourquoi l'optimisation est-elle facilitée ?

Respecter l'immuabilité permet aux outils d'optimisation de React de fonctionner très efficacement :

Fonctionnement efficace de React.memo :

js

Détection précise des dépendances avec useMemo et useCallback :

js

Mauvaise méthode vs bonne méthode :

js

👍 Efficacité de la détection des changements

En respectant l'immuabilité, la détection des changements d'état peut se faire simplement par comparaison de référence (===).

Avantages de performance de la comparaison de référence

Comparaison profonde vs comparaison de référence :

js

Mécanisme de détection des changements dans React

React utilise Object.is() (presque identique à ===) pour vérifier si l'état a changé :

js

Efficacité sur de grands volumes de données

js

En maintenant l'immuabilité comme cela, la détection des changements dans des structures de données complexes peut être effectuée en temps O(1), offrant ainsi des avantages de performance significatifs.

👍 Relation entre la mémoïsation et la programmation fonctionnelle

La mémoïsation (Memoization) est une technique d'optimisation qui retourne une valeur mise en cache pour éviter de recalculer des résultats pour des entrées identiques. La programmation fonctionnelle repose sur le concept de fonction pure (pure function), ce qui rend la mémoïsation très efficace.

Pourquoi elle s'accorde parfaitement avec la programmation fonctionnelle

Les fonctions pures renvoient toujours le même résultat pour les mêmes entrées → optimal pour la mise en cache
Absence d'effets de bord, ce qui permet de réutiliser les résultats mis en cache sans problème
Par exemple, des hooks comme , reposent sur ce concept

Exemple - Optimisation avec useMemo

js

Les fonctions non pures sont difficiles à mémoïser :

js

Ainsi, l'« immuabilité + pureté » de la fonction est en adéquation avec les principes de la mémoïsation, ce qui renforce l'efficacité des deux concepts.

👍 Gestion d'état et lisibilité

En utilisant des composants fonctionnels et des hooks (useState, useReducer), le code de gestion d'état devient concis.

Traiter des logiques complexes avec useReducer

js

Séparer la logique avec un hook personnalisé

js

Cela permet de séparer clairement la logique de rendu de l'interface utilisateur de celle des données, améliorant ainsi la lisibilité.

📌 Conclusion

La raison pour laquelle React adopte la programmation fonctionnelle est la clarté du code, la facilité des tests, l'optimisation et l'efficacité de la détection des changements.

Il est plus facile d'écrire du code de test - une fonction pure ne nécessite que la vérification de l'entrée et de la sortie.
La gestion de l'état devient intuitive - séparation et réutilisation des logiques via les hooks.
L'optimisation des performances se réalise de manière prévisible - comparaison par référence basée sur l'immuabilité.

Le paradigme fonctionnel est une stratégie efficace pour moduler les composants et contrôler la complexité.

💭 Choix de paradigme en Frontend vs Backend

Ceci est mon avis subjectif

Il semble que le frontend (React) soit adapté au paradigme fonctionnel pour rendre efficace le rendu de l'interface utilisateur, la détection des changements d'état, l'optimisation et les tests.

Pureté + immuabilité → Favorise le suivi de l'état et le contrôle du rerendu

En revanche, je pense que pour le backend (Node.js, Java, etc.), face aux questions de performance, gestion des ressources et contrôle du flux de processus, l'orienté objet (OOP) est plus pratique.

class UserProfile extends React.Component {
  state = { name: '', loading: false };
  
  async componentDidMount() {
    this.setState({ loading: true });
    const user = await fetchUser(this.props.userId);
    this.setState({ name: user.name, loading: false });
  }
  
  render() {
    return <div>{this.state.loading ? 'Loading...' : this.state.name}</div>;
  }
}
 
// Il faut considérer le cycle de vie et l'état lors des tests

function UserProfile({ userId }) {
  const { user, loading } = useUser(userId);
  
  if (loading) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}
 
// Seules les props doivent être vérifiées lors des tests (le Hook est testé séparément)

function formatPrice(price, currency = 'USD') {
  return `${currency} ${price.toFixed(2)}`;
}
 
// Prévisibilité du résultat uniquement par l'entrée
expect(formatPrice(10.5)).toBe('USD 10.50');
expect(formatPrice(20, 'KRW')).toBe('KRW 20.00');

// Lorsque l'immuabilité est respectée
const TodoItem = React.memo(({ todo, onToggle }) => (
  <div onClick={() => onToggle(todo.id)}>
    {todo.text} {todo.completed ? '✓' : '○'}
  </div>
));
 
// Si les props ont la même référence, pas de re-render

function TodoList({ todos, filter }) {
  // La filtration ne se réexécute que lorsque le tableau todos est recréé
  const filteredTodos = useMemo(() => 
    todos.filter(todo => todo.category === filter), 
    [todos, filter]
  );
  
  // La fonction n'est pas recréée si les dépendances ne changent pas
  const handleToggle = useCallback((id) => 
    setTodos(prev => prev.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    )), 
    []
  );
  
  return <div>{/* ... */}</div>;
}

// ❌ Modification directe - les outils d'optimisation ne détectent pas les changements
function badUpdate() {
  const newTodos = todos;
  newTodos[0].completed = true;
  setTodos(newTodos); // Même référence, pas de re-render
}
 
// ✅ Création d'un nouvel objet - les outils d'optimisation fonctionnent correctement
function goodUpdate() {
  setTodos(prev => prev.map((todo, index) => 
    index === 0 ? { ...todo, completed: true } : todo
  ));
}

// ❌ Comparaison profonde - vérification récursive de toutes les propriétés (lent)
function deepEqual(obj1, obj2) {
  // Il faut comparer toutes les clés et valeurs des objets
  return JSON.stringify(obj1) === JSON.stringify(obj2);
}
 
// ✅ Comparaison de référence - vérification uniquement de l'adresse mémoire (rapide)
function shallowEqual(obj1, obj2) {
  return obj1 === obj2; // Une seule comparaison suffit
}

function Counter() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: 'John', age: 25 });
  
  // ✅ Les valeurs primitives garantissent automatiquement l'immuabilité
  const increment = () => setCount(prev => prev + 1);
  
  // ✅ Les objets doivent être recréés pour détecter les changements
  const updateAge = () => setUser(prev => ({ ...prev, age: prev.age + 1 }));
  
  // ❌ Ceci ne détectera pas le changement
  const wrongUpdate = () => {
    user.age += 1;
    setUser(user); // Même référence, pas de re-render
  };
}

function DataTable({ items }) {
  // Si les items ont la même référence, pas de nouveau tri
  const sortedItems = useMemo(() => {
    console.log('Tri en cours !'); // Permet de vérifier quand il est exécuté
    return [...items].sort((a, b) => a.name.localeCompare(b.name));
  }, [items]);
  
  return (
    <table>
      {sortedItems.map(item => (
        <tr key={item.id}>
          <td>{item.name}</td>
          <td>{item.price}</td>
        </tr>
      ))}
    </table>
  );
}

function ProductList({ products, searchTerm }) {
  // Ne recommence pas à filtrer si searchTerm ou products ne changent pas
  const filteredProducts = useMemo(() => {
    console.log('Exécution du filtrage !');
    return products.filter(p => 
      p.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [products, searchTerm]);
  
  return <div>{filteredProducts.map(/* ... */)}</div>;
}

// ❌ Non pur - dépend de l'état externe
let discount = 0.1;
function calculatePrice(price) {
  return price * (1 - discount); // Référence une variable externe
}
 
// ✅ Pur - toutes les entrées sont passées en paramètres
function calculatePrice(price, discount = 0) {
  return price * (1 - discount);
}

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { id: Date.now(), text: action.text, completed: false }];
    case 'TOGGLE_TODO':
      return state.map(todo => 
        todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
      );
    case 'DELETE_TODO':
      return state.filter(todo => todo.id !== action.id);
    default:
      return state;
  }
}
 
function TodoApp() {
  const [todos, dispatch] = useReducer(todoReducer, []);
  
  return (
    <div>
      <button onClick={() => dispatch({ type: 'ADD_TODO', text: 'New Todo' })}>
        Add Todo
      </button>
      {/* ... */}
    </div>
  );
}

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });
  
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  
  return [value, setValue];
}
 
// Reutilisable dans plusieurs composants
function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  const [language, setLanguage] = useLocalStorage('language', 'ko');
  
  return <div>{/* Interface des paramètres */}</div>;
}

Pourquoi viser la programmation fonctionnelle avec React

Commentaires

NAVER Boostcamp Web·Mobile 10 — Rétrospective du projet de groupe (Semaines 4 à 7)

Architecture UI Frontend — MVC, MVP, MVVM, Flux

Références

👍 Facilité de test

Avantages des tests des composants fonctionnels

Comparaison avec des exemples concis

👍 Commodité de l'optimisation

Principe essentiel de l'immuabilité

Pourquoi l'optimisation est-elle facilitée ?

👍 Efficacité de la détection des changements

Avantages de performance de la comparaison de référence

Mécanisme de détection des changements dans React

Efficacité sur de grands volumes de données

👍 Relation entre la mémoïsation et la programmation fonctionnelle

Pourquoi elle s'accorde parfaitement avec la programmation fonctionnelle

Exemple - Optimisation avec useMemo

👍 Gestion d'état et lisibilité

Traiter des logiques complexes avec useReducer

Séparer la logique avec un hook personnalisé

📌 Conclusion

💭 Choix de paradigme en Frontend vs Backend

NAVER Boostcamp Web·Mobile 10 — Rétrospective du projet de groupe (Semaines 4 à 7)

Architecture UI Frontend — MVC, MVP, MVVM, Flux

Commentaires

관련 기록

NAVER Boostcamp Web·Mobile 10 — Rétrospective du projet de groupe (Semaines 4 à 7)

Architecture UI Frontend — MVC, MVP, MVVM, Flux

Références

👍 Facilité de test

Avantages des tests des composants fonctionnels

Comparaison avec des exemples concis

👍 Commodité de l'optimisation

Principe essentiel de l'immuabilité

Pourquoi l'optimisation est-elle facilitée ?

👍 Efficacité de la détection des changements

Avantages de performance de la comparaison de référence

Mécanisme de détection des changements dans React

Efficacité sur de grands volumes de données

👍 Relation entre la mémoïsation et la programmation fonctionnelle

Pourquoi elle s'accorde parfaitement avec la programmation fonctionnelle

Exemple - Optimisation avec useMemo

👍 Gestion d'état et lisibilité

Traiter des logiques complexes avec useReducer

Séparer la logique avec un hook personnalisé

📌 Conclusion

💭 Choix de paradigme en Frontend vs Backend

관련 기록

NAVER Boostcamp Web·Mobile 10 — Rétrospective du projet de groupe (Semaines 4 à 7)

Architecture UI Frontend — MVC, MVP, MVVM, Flux