Slide 1
-----------
Slide 2
-----------
Part 1: The purpose of forwardRef is that it lets you directly pass refs to child components, making them easier to manage without adding unnecessary complexity.
Part 2: forwardRef ensures the parent can pass a ref to the internal input element. If we did not use the forwardRef, the component would not know which DOM element you meant to reference and pass to the parent. With forwardRef, the ref is passed as the second argument to the functional component.
Part 3: Therefore, we first wrap our custom component with forwarRef
Part 4: And then expose the DOM input element to the parent component through the ref parameter.
Part 5: Then, in the Parent component we create a ref using useRef ...
Part 6: ... and then pass the ref to our Input component.
Part 7: With the ref in place, we can use it to focus the input element in the click event handler in the parent component!
Slide 3
-----------
Part 1: With React 19, things got simpler and you no longer need to use forwardRef, but pass the ref as on of the props.
Part 2: Therefore, your custom component no longer needs to be wrapped with forwardRef and ref is just one of the props.
Slide 4
-----------
Part 1: Consider these takeaways
Part 2: Use ref directly for DOM elements where possible.
Part 3: Use forwardRef when building custom components that wrap DOM elements but still need to expose them.
Part 4: React 19 simplifies the API but retains compatibility with forwardRef for advanced scenarios.
In React, managing ref with React.forwardRef works similarly but integrates
seamlessly with modern React features. The key advantage of forwardRef is that
it lets you directly pass refs to child components, making them easier to manage
without adding unnecessary complexity.
Here’s an explanation of using ref in React <19 with React.forwardRef and just
ref with React 19+.
--------------------------------------------------------------------------------
REACT.FORWARDREF WITH REACT 18.
WHY FORWARD REFS?
In React, a ref assigned to a component points to the instance of the component
(for class components) or null (for functional components). To access a DOM
element inside a functional component, we need to forward the ref to the DOM
element.
--------------------------------------------------------------------------------
BASIC EXAMPLE: MANAGING AN INPUT'S REF
CHILD COMPONENT USING FORWARDREF
import React, { forwardRef } from "react";
const Input = forwardRef((props, ref) => {
return <input {...props} ref={ref} />;
});
export default Input;
* forwardRef ensures the parent can pass a ref to the internal input element.
* The ref is passed as the second argument to the functional component.
--------------------------------------------------------------------------------
PARENT COMPONENT USING THE REF
import React, { useRef } from "react";
import Input from "./Input";
const Parent = () => {
const inputRef = useRef();
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<h1>Using forwardRef with React 18+</h1>
<Input ref={inputRef} placeholder="Type something..." />
<button onClick={focusInput}>Focus the Input</button>
</div>
);
};
export default Parent;
--------------------------------------------------------------------------------
HOW IT WORKS
1. Input Component:
* Wraps the DOM <input> in React.forwardRef.
* Exposes the DOM input element to the parent component.
2. Parent Component:
* Creates a ref using useRef.
* Passes the ref to the Input component.
* Calls DOM methods (e.g., .focus()) on the ref.
--------------------------------------------------------------------------------
SIMPLIFIED REF HANDLING IN REACT 19
In modern React, you do not have to use forwardRef at all and just pass the ref
as one of the props:
EXAMPLE: DIRECT REF ON DOM ELEMENT
import React from "react";
const Input = ({ ref, ...props }) => {
return <input {...props} ref={ref} />;
});
export default Input;
--------------------------------------------------------------------------------
WHEN FORWARDREF IS NEEDED
Use forwardRef only if:
1. You wrap a DOM element in a custom component and need to expose the DOM
element to the parent.
2. The component should remain reusable with internal DOM access.
--------------------------------------------------------------------------------
KEY TAKEAWAYS
* Use ref directly for DOM elements where possible.
* Use forwardRef when building custom components that wrap DOM elements but
still need to expose them.
* React 19 simplifies the API but retains compatibility with forwardRef for
advanced scenarios.
Let me know if you'd like further details or a more advanced example! 🚀
Maggie is a generative AI that can help you understand the course content better. You can ask her questions about the lecture, and she will try to answer them. You can also see the questions asked by other students and her responses.
Join the discussion to ask questions, share your thoughts, and discuss with other learners
SkillPies