Когда использовать useImperativeHandle

Что такое useImperativeHandle и почему он нужен?

Хук useImperativeHandle позволяет вам изменить объект, который передается вашему компоненту через ref. Обычно в React вы используете рефы для доступа к DOM-элементам или компонентам. Однако, в большинстве случаев, вам хватает стандартного поведения рефов. Зачем тогда нужен useImperativeHandle? Этот хук становится полезным, когда вы хотите предоставить строго ограниченный интерфейс для работы с вашим компонентом.

Представьте, что вы создаете сложный пользовательский компонент, и хотите, чтобы другие разработчики могли вызывать только определенные методы или свойства этого компонента. Здесь и появляется useImperativeHandle.

Пример:

Допустим, у вас есть кастомный модальный компонент. Вместо того чтобы предоставлять полный доступ к внутреннему DOM, вы хотите, чтобы разработчики могли просто открывать и закрывать модалку через методы open и close.

import React, { useImperativeHandle, forwardRef, useRef, useState } from 'react';



const Modal = forwardRef((props, ref) => {

  const [isVisible, setIsVisible] = useState(false);



  useImperativeHandle(ref, () => ({

    open: () => setIsVisible(true),

    close: () => setIsVisible(false),

  }));



  if (!isVisible) return null;



  return (

    <div className="modal">

      <p>{props.children}</p>

      <button onClick={() => setIsVisible(false)}>Close</button>

    </div>

  );

});



export default Modal;

Когда использовать useImperativeHandle

Теперь, когда вы понимаете основную идею, давайте разберем случаи, когда useImperativeHandle действительно нужен. Обычно вы будете использовать его в следующих ситуациях:

1. Контроль над сложными компонентами

Иногда в интерфейсе требуется, чтобы компонент предоставлял определенный набор методов, вместо полного доступа к своему состоянию или DOM. Например, если вы создаете аудиоплеер, логично предоставить методы play и pause, скрывая внутреннюю логику управления состоянием.

Пример:

Создадим компонент AudioPlayer, который предоставляет методы для воспроизведения и паузы аудио.

import React, { useImperativeHandle, forwardRef, useRef } from 'react';



const AudioPlayer = forwardRef((props, ref) => {

  const audioRef = useRef(null);



  useImperativeHandle(ref, () => ({

    play: () => audioRef.current.play(),

    pause: () => audioRef.current.pause(),

  }));



  return <audio ref={audioRef} src={props.src} />;

});



export default AudioPlayer;

Теперь вы можете использовать этот компонент, как будто он предлагает удобный API:

import React, { useRef } from 'react';

import AudioPlayer from './AudioPlayer';



const App = () => {

  const playerRef = useRef();



  return (

    <div>

      <AudioPlayer ref={playerRef} src="audio.mp3" />

      <button onClick={() => playerRef.current.play()}>Play</button>

      <button onClick={() => playerRef.current.pause()}>Pause</button>

    </div>

  );

};



export default App;

2. Улучшение читаемости и изоляция логики

Когда ваш компонент растет, легко запутаться в его внутренней логике. useImperativeHandle помогает разделить логику так, чтобы пользователи компонента видели только интерфейс, который вы определяете. Например, это особенно полезно в библиотеках компонентов или сложных проектах, где компоненты используются повторно.

Пример:

Предположим, вы создаете компонент формы, который проверяет все поля перед отправкой:

import React, { useImperativeHandle, forwardRef, useRef } from 'react';



const Form = forwardRef((props, ref) => {

  const nameInputRef = useRef();

  const emailInputRef = useRef();



  useImperativeHandle(ref, () => ({

    validate: () => {

      if (!nameInputRef.current.value) {

        alert('Name is required');

        return false;

      }

      if (!emailInputRef.current.value.includes('@')) {

        alert('Invalid email');

        return false;

      }

      return true;

    },

  }));



  return (

    <form>

      <input ref={nameInputRef} type="text" placeholder="Name" />

      <input ref={emailInputRef} type="email" placeholder="Email" />

    </form>

  );

});



export default Form;

Использование:

import React, { useRef } from 'react';

import Form from './Form';



const App = () => {

  const formRef = useRef();



  const handleSubmit = () => {

    if (formRef.current.validate()) {

      alert('Form submitted!');

    }

  };



  return (

    <div>

      <Form ref={formRef} />

      <button onClick={handleSubmit}>Submit</button>

    </div>

  );

};



export default App;

3. Использование с библиотеками и сторонними инструментами

В некоторых случаях вы работаете с библиотеками, которые требуют наличия строго определенного рефа для передачи. Например, если вы используете библиотеку для анимаций или управления фокусом, useImperativeHandle позволяет создавать интерфейс, соответствующий требованиям библиотеки.

Пример:

Представим, что вы используете библиотеку анимации, которая требует метода startAnimation. Вы можете создать компонент, который "оборачивает" библиотеку и предоставляет нужный интерфейс:

import React, { useImperativeHandle, forwardRef } from 'react';



const AnimatedBox = forwardRef((props, ref) => {

  let animationId;



  const startAnimation = () => {

    animationId = setInterval(() => {

      console.log('Animating...');

    }, 1000);

  };



  const stopAnimation = () => {

    clearInterval(animationId);

  };



  useImperativeHandle(ref, () => ({

    start: startAnimation,

    stop: stopAnimation,

  }));



  return <div className="box">I am an animated box</div>;

});



export default AnimatedBox;

Теперь вы можете управлять анимацией снаружи:

import React, { useRef } from 'react';

import AnimatedBox from './AnimatedBox';



const App = () => {

  const boxRef = useRef();



  return (

    <div>

      <AnimatedBox ref={boxRef} />

      <button onClick={() => boxRef.current.start()}>Start Animation</button>

      <button onClick={() => boxRef.current.stop()}>Stop Animation</button>

    </div>

  );

};



export default App;

Когда не стоит использовать useImperativeHandle

Важно помнить, что useImperativeHandle — это мощный инструмент, но его следует применять с осторожностью. Если вам не нужно явно изменять поведение рефа или ограничивать доступ к вашему компоненту, лучше не использовать этот хук. Стандартные рефы и управление состоянием через useState или useReducer обычно достаточны для большинства задач.

useImperativeHandle полезен в особых случаях, но злоупотребление этим хуком может сделать код сложным и запутанным.