React useRef & forwardRef | Hooks | React js Bangla Tutorial Series

React is a popular JavaScript library for building user interfaces. It provides a set of hooks that allow developers to add functionality to their components. Two popular hooks are useRef and forwardRef.

useRef

The useRef hook is used to create a mutable object that can hold a reference to a DOM element or a value. It is useful for accessing DOM elements directly or for keeping values between renders.

Here is an example of how the useRef hook can be used:

const myRef = useRef(null);

useEffect(() => {
  myRef.current.focus();
}, []);
    

forwardRef

The forwardRef hook is used to forward a ref through a component to a child component. It is useful for accessing the DOM elements of child components from the parent component.

Here is an example of how the forwardRef hook can be used:

const MyComponent = forwardRef((props, ref) => {
  return ;
});

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

  return ;
};
    

Conclusion

In this article, we discussed the useRef and forwardRef hooks in React. These hooks are useful for accessing DOM elements and forwarding refs between components. By using these hooks, developers can add more functionality to their React components and create more dynamic user interfaces.

Thank you for reading the React useRef & forwardRef tutorial series. Stay tuned for more tutorials on React and other web development topics!