Forem: Hashan Hemachandra

Mastering Refs in React: Practical Guide with useRef and forwardRef

Hashan Hemachandra — Sun, 24 Mar 2024 02:10:32 +0000

Welcome to an in-depth tutorial where we explore the practical use of React’s useRef and forwardRef. By the end of this post, you'll understand how to effectively use these hooks to control and manipulate DOM elements and component instances in a React application.

Introduction

In React, managing focus, reading or manipulating the DOM directly is generally not recommended as it goes against the core principles of React’s declarative nature. However, there are scenarios where direct DOM manipulation becomes necessary, such as managing focus, measuring the size of an element, or integrating with third-party DOM libraries. In such cases, React provides us with useRef and forwardRef.

Let’s dive into a practical example to understand how to use useRef and forwardRef in a Next.js project that displays emojis and their meanings. We'll be building a feature where clicking an emoji scrolls the corresponding meaning into view. I will attach my Git hub repo here. You can run this locally and see the result.

Project Structure

Our Next.js project is structured as follows:

app: Contains our main page page.tsx
components: Houses our React components including EmojiRow, EmojiTile, MeaningCard, and MeaningList.
constants: Stores our data files emojiData.tsx and meaningData.tsx
types: Contains type definitions used in our project.

First Let’s look at our constants.

emojiData.tsx

import { EmojiDataType } from "@/types/types";

export const EMOJI_DATA: EmojiDataType[] = [
  {
    icon: "🖖",
    name: "Prosper",
  },
  {
    icon: "🤞",
    name: "Luck",
  },
  {
    icon: "👌",
    name: "Perfect",
  },
  {
    icon: "🤟",
    name: "Love",
  },
  {
    icon: "🙏",
    name: "Pray",
  },
];

meaningData.tsx

import { MeaningDataType } from "@/types/types";

export const MEANING_DATA: MeaningDataType[] = [
  {
    name: "Prosper",
    description: "Live Long and Prosper",
  },
  {
    name: "Luck",
    description: "Fingers crossed, I wish you Good Luck!",
  },
  {
    name: "Perfect",
    description: "This is Perfect!",
  },
  {
    name: "Love",
    description: "I Love You 💕",
  },
  {
    name: "Pray",
    description: "God will always be with you",
  },
];

My plan is to when I click on Emoji Tile named Propser I am going to reference the Meaning Card inside the Meaning List.

Using ‘useRef’ in ‘page.tsx’

In our page.tsx, we utilize useRef to create references for different emoji meanings:

import { useRef } from "react";
const Home = () => {
  const meaningRefs = {
    Prosper: useRef(null),
    Luck: useRef(null),
    Perfect: useRef(null),
    Love: useRef(null),
    Pray: useRef(null),
  };
};

Full code

"use client";

import EmojiRow from "@/components/EmojiRow";
import MeaningList from "@/components/MeaningList";
import { useRef } from "react";
const Home = () => {
  const meaningRefs = {
    Prosper: useRef(null),
    Luck: useRef(null),
    Perfect: useRef(null),
    Love: useRef(null),
    Pray: useRef(null),
  };

  return (
    <div className="flex min-h-screen flex-col items-center justify-center gap-10">
      <h1 className="text-3xl font-medium">Mastering Refs in React 🧐</h1>
      <div className="flex gap-7">
        <EmojiRow meaningRefs={meaningRefs} />
      </div>
      <div className="flex flex-col gap-7 w-[500px] max-h-[calc(100vh-910px)] overflow-y-auto shadow-inner">
        <MeaningList meaningRefs={meaningRefs} />
      </div>
    </div>
  );
};

export default Home;

Here, useRef is used to create an object meaningRefs where each property is a ref corresponding to a particular meaning. useRef returns a mutable ref object whose .current property is initialized to the passed argument (null in this case). The object persists for the full lifetime of the component.

We create a dictionary of meaning references using the useRef hook. Then insert the whole object into props. To choose which key-value pair to use from the meaningRefs object passed as a prop, we would typically access the pair by its key. The key is a string that identifies the particular meaning ref we want to use.

The ‘EmojiTile’ Component

The EmojiTile component represents an individual emoji that users can interact with. When clicked, it triggers a scroll action that brings the corresponding meaning into view. Here's how we implement the EmojiTile:

"use client";

import { EmojiDataType } from "@/types/types";

interface EmojiTileProps {
  emoji: EmojiDataType;
  onClick: () => void;
}

const EmojiTile = ({ emoji, onClick }: EmojiTileProps) => {
  return (
    <div
      className="w-20 h-20 shadow flex items-center justify-center rounded-md bg-black/5 hover:bg-black/10 cursor-pointer"
      onClick={onClick}
    >
      {emoji.icon}
    </div>
  );
};

export default EmojiTile;

Implementing Scroll Behavior in ‘EmojiRow’

In our EmojiRow component, we handle the click event on each emoji. When an emoji is clicked, we want to scroll the corresponding meaning into view:

"use client";

import { EMOJI_DATA } from "@/constants/emojiData";
import EmojiTile from "./EmojiTile";

type MeaningRefs = {
  [key: string]: React.RefObject<HTMLDivElement>;
};

const EmojiRow = ({ meaningRefs }: { meaningRefs: MeaningRefs }) => {
  return EMOJI_DATA.map((emoji, index) => (
    <div key={emoji.name} className="">
      <EmojiTile
        emoji={emoji}
        onClick={() =>
          meaningRefs[emoji.name].current?.scrollIntoView({
            behavior: "smooth",
          })
        }
      />
    </div>
  ));
};

export default EmojiRow;

The ‘MeaningList’ Component

The MeaningList component is responsible for displaying the list of meanings. Each meaning is wrapped in a div that is linked to a specific ref, enabling the scroll-into-view functionality when an emoji is clicked:

"use client";

import { MEANING_DATA } from "@/constants/meaningData";
import MeaningCard from "./MeaningCard";

type MeaningRefs = {
  [key: string]: React.RefObject<HTMLDivElement>;
};


const MeaningList = ({ meaningRefs }: { meaningRefs: MeaningRefs }) => {
  return MEANING_DATA.map((meaning) => (
    <div key={meaning.name} ref={meaningRefs[meaning.name]} >
      <MeaningCard meaning={meaning} />
    </div>
  ));
};

export default MeaningList;

This component maps over the MEANING_DATA array, creating a list where each item is a MeaningCard. By assigning the ref from meaningRefs to the wrapping div, we establish a connection between the emojis and their meanings. When an emoji is clicked, the application scrolls to the corresponding div in this list.

Forwarding Refs with ‘forwardRef’ in ‘MeaningCard’

In some cases, you might need a child component to expose its DOM node to a parent component. Here’s where forwardRef comes into play. In our MeaningCard component, we wrap the component with forwardRef to forward a ref from its parent:

"use client";

import { MeaningDataType } from "@/types/types";
import { forwardRef, LegacyRef } from "react";

interface MeaningCardProps {
  meaning: MeaningDataType;
}

const MeaningCard = forwardRef(
  ({ meaning }: MeaningCardProps, ref: LegacyRef<HTMLDivElement> | null) => {
    return (
      <div
        className="h-20 bg-black/5 flex items-center justify-center rounded-md shadow"
        ref={ref}
      >
        {meaning.description}
      </div>
    );
  }
);

MeaningCard.displayName = "MeaningCard";

export default MeaningCard;

By using forwardRef, MeaningCard can now receive a ref that it attaches to its root element. This allows the parent component to directly reference the DOM node.

I hope now you got an idea about how to use useRef to create references to DOM nodes and how to use forwardRef to allow child components to expose their DOM nodes to parent components. This pattern is particularly useful in scenarios where you need to directly interact with the DOM, such as controlling focus or scrolling elements into view.

Let’s meet with another practical example in React. Until then, have a good one! Peace ✌️

Understanding the Power of React Context API through a Practical Example

Hashan Hemachandra — Sun, 10 Mar 2024 15:52:06 +0000

Hi folks 🖖!

Today let try to simply understand the react context hook!

In modern web development, managing state across multiple components can be challenging, especially as applications grow in complexity. The React Context API offers a powerful solution to this problem by enabling developers to share data across the entire component tree, avoiding the cumbersome “prop-drilling” process. Today I will show you importance of the Context API in React, demonstrated through a practical example of a simple text input application.

What is the React Context API?

The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to “prop drilling” or moving props from grandparent to child to parent, and so on. Context is an easier, lighter approach to state management.
A Practical Example: Text Input Application

To illustrate the power of the Context API, let’s dive into a practical example: a simple text input application. In this example, we have two main components: TextInputand InputPreview. The goal is to type text into the TextInput component and have it immediately reflected in the InputPreview component. I will use Next Js for the Example Project.
Project Structure

Our project structure looks like this:

TextInput.tsx: A component for inputting text.
InputPreview.tsx: A component for displaying the inputted text.
useInputContext.tsx: A custom hook utilizing Context to manage and pass state.
page.tsx: A page that renders both components and wraps them with a Context provider.

Creating Context and Provider

In useInputContext.tsx, we define our Context and a provider component. The Context holds the current state of the input text and a function to update this state. This allows any child components to access and modify the input text without needing to pass props down manually.

'use client'

import React, { createContext, useState, useContext } from "react";

// Define the context shape. This is the shape of the data that our context will provide
interface InputContextType {
  inputText: string; // The input text from the user
  setInputText: React.Dispatch<React.SetStateAction<string>>; // A function to set the input text from the user
}

// Create the context with a default value. This sets up the context with a default empty string and a function to set the input text
const InputContext = createContext<InputContextType | undefined>(undefined);

// Create a custom hook for using this context. This hook allows us to access the input text and function to set the input text from the context
export const useInputContext = () => {
  const context = useContext(InputContext); // Get the context from the nearest Provider
  if (!context) { // Check if the context is not defined. This should never happen unless we are not using our provider
    throw new Error("useInputContext must be used within a InputProvider"); // Throw an error if the context is not defined
  }
  return context;
};

// Create a provider component. This component sets up the context and provides it to it's children
export const InputProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [inputText, setInputText] = useState(""); // Set up the state for the input text

  return (
    <InputContext.Provider value={{ inputText, setInputText }}> { /*Create a provider for the context and pass in the current input text and function to set the input text */}
      {children} {/* Render the children of this component */}
    </InputContext.Provider>
  );
};

Consuming Context in Components

In our TextInput component, we consume the Context to update the inputText whenever the user types in the input field

// TextInput.tsx
'use client'

import React from 'react';
import { useInputContext } from '@/hooks/useInputContext';

const TextInput = () => {
  const { inputText, setInputText } = useInputContext();

  return (
    <div className="w-96 h-96 bg-gray-100/90 rounded-sm flex flex-col items-center justify-center gap-4 shadow-md">
      <label htmlFor="text">This 👇 is the Input Component</label>
      <input
        type="text"
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        name="Name"
        id="text"
        className="border rounded-md"
      />
    </div>
  );
};

export default TextInput;

Similarly, in InputPreview, we consume the Context to display the current inputText.

// InputPreview.tsx
"use client";

import React from "react";
import { useInputContext } from "@/hooks/useInputContext";

const InputPreview = () => {
  const { inputText } = useInputContext();

  return (
    <div className="gap-4 flex-col w-96 h-96 bg-gray-100/90 rounded-sm flex items-center justify-center shadow-md">
      <label htmlFor="text">This 👇 is the Preview Component</label>
      <p className="text-xl">{inputText}</p>
    </div>
  );
};

export default InputPreview;

Assembling the Components

In page.tsx, we assemble our components and wrap them with the InputProvider to ensure that the Context is available to all components that need it.

import InputPreview from "@/components/InputPreview";
import TextInput from "@/components/TextInput";
import { InputProvider } from "@/hooks/useInputContext";
import React from "react";

const page = () => {
  return (
    <InputProvider>
      <div className="flex flex-col items-center justify-center text-center w-screen h-screen gap-5">
        <h1 className="text-3xl font-semibold">
          Usage of Context API in React 🤓
        </h1>
        <div className="flex flex-row gap-10 justify-center items-center  text-center">
          <TextInput />
          <InputPreview />
        </div>
      </div>
    </InputProvider>
  );
};

export default page;

Run the application using npm run dev

You can see something like this in the web browser:

Type something in the Input field, so it will be shown inside the Preview

The Benefits of Using Context API

By using the Context API in our example, we successfully shared state between two sibling components without having to prop-drill through intermediate components. This makes our code more maintainable and easier to understand.

Furthermore, Context API can be a lighter alternative to state management libraries for smaller applications or for specific isolated state management scenarios within larger applications. It simplifies the process of state sharing across components and enhances the scalability of React applications.

I hope you guys understood the basic concept of Context API in React. I will attach the link to repository for further clarifications. Please give me a star if you think effort was worthy.

Repo : https://github.com/hmalindu1/use-context-hook

Until Next time, Have a good one! Peace ✌️