M

MLOG

Українська

Дізнайтеся про хук React useEvent, потужний інструмент для створення стабільних посилань на обробники подій, що покращує продуктивність та запобігає зайвим перерендерам.

React useEvent: Досягнення стабільних посилань на обробники подій

Розробники React часто стикаються з проблемами при роботі з обробниками подій, особливо в сценаріях, що включають динамічні компоненти та замикання. Хук useEvent, відносно недавнє доповнення до екосистеми React, пропонує елегантне вирішення цих проблем, дозволяючи розробникам створювати стабільні посилання на обробники подій, які не викликають зайвих перерендерів.

Розуміння проблеми: нестабільність обробників подій

У React компоненти перерендерюються, коли змінюються їхні пропси або стан. Коли функція обробника подій передається як проп, на кожному рендері батьківського компонента часто створюється новий екземпляр функції. Цей новий екземпляр функції, навіть якщо він має ту саму логіку, вважається React іншим, що призводить до перерендеру дочірнього компонента, який його отримує.

Розглянемо цей простий приклад:


import React, { useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log('Clicked from Parent:', count);
    setCount(count + 1);
  };

  return (
    

      
      
Count: {count}

    

  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return ;
}

export default ParentComponent;

У цьому прикладі handleClick створюється заново при кожному рендері ParentComponent. Навіть якщо ChildComponent може бути оптимізований (наприклад, за допомогою React.memo), він все одно буде перерендерюватися, оскільки проп onClick змінився. Це може призвести до проблем з продуктивністю, особливо у складних додатках.

Представляємо useEvent: Рішення

Хук useEvent вирішує цю проблему, надаючи стабільне посилання на функцію обробника подій. Він ефективно відокремлює обробник подій від циклу перерендеру його батьківського компонента.

Хоча useEvent не є вбудованим хуком React (станом на React 18), його можна легко реалізувати як кастомний хук, або ж у деяких фреймворках та бібліотеках він надається як частина їхнього набору утиліт. Ось поширена реалізація:


import { useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // UseLayoutEffect is crucial here for synchronous updates
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // The dependency array is intentionally empty, ensuring stability
  ) as T;
}

export default useEvent;

Пояснення:

Використання useEvent на практиці

Тепер давайте проведемо рефакторинг попереднього прикладу з використанням useEvent:


import React, { useState, useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // UseLayoutEffect is crucial here for synchronous updates
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // The dependency array is intentionally empty, ensuring stability
  ) as T;
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    console.log('Clicked from Parent:', count);
    setCount(count + 1);
  });

  return (
    

      
      
Count: {count}

    

  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return ;
}

export default ParentComponent;

Обгортаючи handleClick у useEvent, ми гарантуємо, що ChildComponent отримує те саме посилання на функцію протягом рендерів ParentComponent, навіть коли стан count змінюється. Це запобігає зайвим перерендерам ChildComponent.

Переваги використання useEvent

Сценарії використання useEvent

Альтернативи та міркування

Хоча useEvent є потужним інструментом, існують альтернативні підходи та міркування, які варто враховувати:

Міркування щодо інтернаціоналізації та доступності

При розробці React-додатків для глобальної аудиторії важливо враховувати інтернаціоналізацію (i18n) та доступність (a11y). Сам по собі useEvent безпосередньо не впливає на i18n або a11y, але він може опосередковано покращити продуктивність компонентів, які обробляють локалізований контент або функції доступності.

Наприклад, якщо компонент відображає локалізований текст або використовує ARIA-атрибути на основі поточної мови, забезпечення стабільності обробників подій у цьому компоненті може запобігти зайвим перерендерам при зміні мови.

Приклад: useEvent з локалізацією


import React, { useState, useContext, createContext, useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // UseLayoutEffect is crucial here for synchronous updates
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // The dependency array is intentionally empty, ensuring stability
  ) as T;
}

const LanguageContext = createContext('en');

function LocalizedButton() {
  const language = useContext(LanguageContext);
  const [text, setText] = useState(getLocalizedText(language));

  const handleClick = useEvent(() => {
    console.log('Button clicked in', language);
    // Perform some action based on the language
  });

  function getLocalizedText(lang) {
      switch (lang) {
        case 'en':
          return 'Click me';
        case 'fr':
          return 'Cliquez ici';
        case 'es':
          return 'Haz clic aquí';
        default:
          return 'Click me';
      }
    }

    //Simulate language change
    React.useEffect(()=>{
        setTimeout(()=>{
            setText(getLocalizedText(language === 'en' ? 'fr' : 'en'))
        }, 2000)
    }, [language])

  return ;
}

function App() {
  const [language, setLanguage] = useState('en');

  const toggleLanguage = useCallback(() => {
    setLanguage(language === 'en' ? 'fr' : 'en');
  }, [language]);

  return (
    
      

        
        
      

    
  );
}

export default App;

У цьому прикладі компонент LocalizedButton відображає текст залежно від поточної мови. Використовуючи useEvent для обробника handleClick, ми гарантуємо, що кнопка не буде зайвий раз перерендерюватися при зміні мови, покращуючи продуктивність та користувацький досвід.

Висновок

Хук useEvent є цінним інструментом для розробників React, які прагнуть оптимізувати продуктивність та спростити логіку компонентів. Надаючи стабільні посилання на обробники подій, він запобігає зайвим перерендерам, покращує читабельність коду та підвищує загальну ефективність React-додатків. Хоча це не вбудований хук React, його проста реалізація та значні переваги роблять його вартим доповненням до інструментарію будь-якого розробника React.

Розуміючи принципи роботи useEvent та сценарії його використання, розробники можуть створювати більш продуктивні, підтримувані та масштабовані React-додатки для глобальної аудиторії. Не забувайте завжди вимірювати продуктивність та враховувати конкретні потреби вашого додатка перед застосуванням технік оптимізації.