🚀 Mastering useImperativeHandle in React & React Native: A Beginner's Guide

🔹 Introduction

React provides various hooks to manage state, effects, and refs. One lesser-known but powerful hook is useImperativeHandle. It allows you to customize the instance value that is exposed when using React.forwardRef. This is especially useful when working with imperative actions in functional components.

In this blog, we’ll explore: ✅ What useImperativeHandle does
✅ Why and when to use it
✅ A practical example with step-by-step implementation in React and React Native
✅ Pros and cons of using useImperativeHandle

🔹 What is useImperativeHandle?

useImperativeHandle is a React Hook that allows a parent component to call functions inside a child component using refs.

Syntax:

useImperativeHandle(ref, createHandle, [dependencies])

• ref → The forwarded ref from React.forwardRef.

• createHandle → A function that returns an object with methods exposed to the parent.

• [dependencies] → If specified, re-runs only when dependencies change.

🔹 When to Use useImperativeHandle

Use it when: ✔️ You need to expose specific functions from a child component to a parent.
✔️ You want to control imperative operations (e.g., focusing an input, triggering an animation).
✔️ You are working with third-party libraries that rely on imperative APIs.

💡 Avoid using it for general state management – React encourages declarative programming!

🔹 Example in React: Managing Input Focus with useImperativeHandle

Let’s create a component that allows the parent to control the focus of an input field inside the child component.

Step 1: Create a Child Component

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

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focusInput: () => {
      if (inputRef.current) {
        inputRef.current.focus();
      }
    },
    clearInput: () => {
      if (inputRef.current) {
        inputRef.current.value = "";
      }
    }
  }));

  return <input ref={inputRef} placeholder="Type here..." />;
});

export default CustomInput;

Step 2: Use the Child Component in Parent

import React, { useRef } from "react";
import CustomInput from "./CustomInput";

const ParentComponent = () => {
  const inputRef = useRef(null);

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={() => inputRef.current.focusInput()}>Focus Input</button>
      <button onClick={() => inputRef.current.clearInput()}>Clear Input</button>
    </div>
  );
};

export default ParentComponent;

How It Works:

• The parent component holds a ref (inputRef).

• The child component (CustomInput) uses useImperativeHandle to expose functions (focusInput and clearInput).

• The parent can call inputRef.current.focusInput() to focus the input field.

• The parent can call inputRef.current.clearInput() to clear the input field.

🔹 Example in React Native: Controlling TextInput Focus

Let’s implement a similar example in React Native where the parent can control the focus of a TextInput.

Step 1: Create a CustomTextInput Component

import React, { useRef, useImperativeHandle, forwardRef } from "react";
import { TextInput, View, Button } from "react-native";

const CustomTextInput = forwardRef((props, ref) => {
  const textInputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focusInput: () => {
      if (textInputRef.current) {
        textInputRef.current.focus();
      }
    },
    clearInput: () => {
      if (textInputRef.current) {
        textInputRef.current.clear();
      }
    }
  }));

  return <TextInput ref={textInputRef} placeholder="Type here..." style={{ borderWidth: 1, padding: 10, marginBottom: 10 }} />;
});

export default CustomTextInput;

Step 2: Use the CustomTextInput in Parent

import React, { useRef } from "react";
import { View, Button } from "react-native";
import CustomTextInput from "./CustomTextInput";

const ParentComponent = () => {
  const inputRef = useRef(null);

  return (
    <View>
      <CustomTextInput ref={inputRef} />
      <Button title="Focus Input" onPress={() => inputRef.current.focusInput()} />
      <Button title="Clear Input" onPress={() => inputRef.current.clearInput()} />
    </View>
  );
};

export default ParentComponent;

How It Works in React Native:

• The parent component (ParentComponent) holds a ref (inputRef).

• The child component (CustomTextInput) exposes focusInput and clearInput methods.

• The parent calls inputRef.current.focusInput() to focus the TextInput.

• The parent calls inputRef.current.clearInput() to clear the input field.

🔹 Pros & Cons of useImperativeHandle

✅ Pros:

✔️ Allows controlled imperative actions.
✔️ Helps when using third-party libraries.
✔️ Keeps child component logic encapsulated.
✔️ Improves code maintainability by exposing only required methods.

❌ Cons:

❌ Breaks React’s declarative approach (use sparingly).
❌ Can make components harder to test and debug.
❌ Requires forwardRef, adding extra complexity.

🔹 Conclusion

✅ useImperativeHandle is a powerful hook for exposing child component methods to the parent.
✅ It should be used only when necessary for imperative actions.
✅ Works well for input focus, animations, modal handling, and third-party integrations.

💡 Use it wisely! For most cases, prefer React’s declarative approach over imperative control.

🎯 What’s Next? 🚀 Try modifying the example to expose more functions like enabling/disabling the input.
📩 Have questions? Drop them in the comments!
🔗 Want more React & React Native tips? Follow for updates!