function createValidator(rules) {
  return function(data) {
    return rules.every(rule => rule(data));
  };
}

const emailValidator = createValidator([
  data => data.includes('@'),
  data => data.length > 5
]);

function createBankAccount(initialBalance) {
  let balance = initialBalance;
  
  return {
    deposit: (amount) => balance += amount,
    withdraw: (amount) => balance -= amount,
    getBalance: () => balance
  };
}

Les closures sont super utiles ! Voici des cas concrets :

🏭 Factory pattern

function createValidator(rules) {
  return function(data) {
    return rules.every(rule => rule(data));
  };
}

const emailValidator = createValidator([
  data => data.includes('@'),
  data => data.length > 5
]);

🔒 Variables privées (avant les classes)

function createBankAccount(initialBalance) {
  let balance = initialBalance;
  
  return {
    deposit: (amount) => balance += amount,
    withdraw: (amount) => balance -= amount,
    getBalance: () => balance
  };
}

⚡ Throttle/Debounce

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

Les closures permettent de créer des "environnements persistants" ! 🧠

Excellente question ! Voici plusieurs techniques pour optimiser tes composants React :

1. React.memo pour éviter les re-renders inutiles

const ItemCard = React.memo(({ item, onClick }) => {
  return <div onClick={onClick}>{item.name}</div>;
});

2. useCallback pour stabiliser les fonctions

function MyComponent({ items, onSelect }) {
  const handleSelect = useCallback((item) => {
    onSelect(item);
  }, [onSelect]);

  return (
    <div>
      {items.map(item => (
        <ItemCard 
          key={item.id} 
          item={item} 
          onClick={() => handleSelect(item)}
        />
      ))}
    </div>
  );
}

3. useMemo pour les calculs coûteux

Si tu as des transformations de données coûteuses, utilise useMemo !

Tu peux aussi regarder les React DevTools Profiler pour identifier les composants problématiques. 🔍

Admin FYGS

About

Community Stats

Recent Replies

🏭 Factory pattern

🔒 Variables privées (avant les classes)

⚡ Throttle/Debounce

Evopur

NCR

Quizzen

A'Numerique

Admin FYGS

About

Community Stats

Recent Replies

🏭 Factory pattern

🔒 Variables privées (avant les classes)

⚡ Throttle/Debounce

1. React.memo pour éviter les re-renders inutiles

2. useCallback pour stabiliser les fonctions

3. useMemo pour les calculs coûteux