Understanding Components in ReactJS

ReactJS is a powerful library that allows developers to create user interfaces by breaking them down into components. Think of a component as a piece of Lego. Just like how you can build a large Lego structure by snapping together small pieces, you can build a complex user interface by combining different components.

The Challenge with Non-extending Components

In ReactJS, you may come across a scenario where you need to reference a component that doesn't extend from React.Component. This can be tricky because these components, also known as functional components, don't have instances and hence, don't have a this keyword, which is typically used to reference components.

The useRef Hook

To reference a non-extending component, we can use a feature available in ReactJS called Hooks. Hooks are a new addition in React 16.8 that let you use state and other React features without writing a class.

The useRef Hook can be used to create a reference to an element. The reference can be assigned to a variable and can later be used to access that element. Here's how you can use it:

import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}

export default TextInput;

In this example, useRef is used to create a reference inputRef to the input field. When the button is clicked, the handleClick function is called, which uses the inputRef to focus the input field.

The forwardRef Function

Another way to reference a non-extending component is using the forwardRef function. This function is used to pass a ref from a parent component to a child component.

Here's how you can use it:

import React, { forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => (
  <input ref={ref} type="text" />
));

function ParentComponent() {
  const inputRef = React.createRef();

  const handleClick = () => {
    inputRef.current.focus();
  }

  return (
    <div>
      <ChildComponent ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}

export default ParentComponent;

In this example, forwardRef is used to create a ChildComponent that accepts ref as a prop from the ParentComponent. The ParentComponent can then use this ref to access the input field in the ChildComponent.

Wrapping Up

To reference a non-extending component in ReactJS, you can use either the useRef Hook or the forwardRef function. The useRef Hook allows you to create a reference to an element, while the forwardRef function allows you to pass a ref from a parent component to a child component.

Remember, ReactJS is like Lego. Just as you can build a large structure by combining small Lego pieces, you can build a complex user interface by combining different components. The useRef Hook and the forwardRef function are like the little notches on the Lego pieces that allow you to snap them together. They may seem small and insignificant, but they play a crucial role in helping you build your user interface.

As you continue your journey in ReactJS, always be curious and explore different ways to solve challenges. Happy coding!