Error Handling using Error Boundaries in React 16

Render Multiple Elements without a Wrapping Element in a Component in React 16

Render Text Only Components in React 16

Render Elements Outside the Current React Tree using Portals in React 16

Define DOM Attributes in React 16

Call setState with null to Avoid Triggering an Update in React 16

Render Multiple Elements using React.Fragment and the JSX Fragment Syntax <> in React 16.2

Create a DOM reference using createRef in React 16.3

Forward a DOM reference to another Component using forwardRef in React 16.3

Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3

Capture values using the lifecycle hook getSnapshotBeforeUpdate in React 16.3

Pass Data through a Component Tree using Context Providers and Consumers in React 16.3

Leverage New Features of React 16

The function `forwardRef` allows us to extract a ref and pass it to its descendants. This is a powerful tool, but should be used with caution to avoid unexpected ref behaviour. The technique of forwarding refs really starts to shine in combination with higher order components (HOCs).

react

https://app.egghead.io/api/v1/lessons/react-forward-a-dom-reference-to-another-component-using-forwardref-in-react-16-3/subtitles

Instructor: [00:02] The function forwardRef allows us to pass a ref through a component to one of its descendants. It accepts a function with the argument's props and ref. Accordingly, we update our text input component. While this is possible, make sure to avoid this pattern. Someone using the text input without knowing its internals would expect that they receive an instance of text input while we currently provide them with the DOM element.

[00:28] See here when we log out the input ref. In general, it's not recommended to provide access to a child's DOM node from the parent component because it breaks component encapsulation. Nevertheless, it can occasionally be useful for triggering focus or measuring the size or position of a child DOM node.

[00:48] In case you want to provide access, the React team recommends to expose a prop on the child, for example input ref. The child component can then forward the prop to the DOM node as a ref attribute. This lets the parent pass its ref to the child's DOM node through the component in the middle.

[01:08] ForwardRef should be avoided in such a case. Still, it can be a useful tool, particularly with higher order components. Let me demonstrate it by an example. We first rewrite our text input a bit and add a focus function.

[01:32] In the App component, we rendered a text input and a button. Once the button is pressed, we programmatically set focus on the text input using a ref. Works fine. Next up, we create the lock prop's higher order component. It allows us to render a wrapped component, logging its props, and all of that without changing the text input component itself.

[02:03] Let's use it to enhance our text input. Rendering works perfectly fine. There's one issue though. Our focus button stopped working. This is the case because ref is referring to the lock props component inside the lock props function. Because it's spreading all props automatically, someone could think ref is passed down, as well. Ref is not a prop. Like key, it's handled differently by React.

[02:30] To get our example working again without removing lock props, we can use ref for hoarding. Instead of returning lock props, we use React.forwardRef. We pass the ref as forwardRefProp to the lock props component. Inside the render function, we extract forwardRef from the props and pass it as a ref. In addition, we spread all the other props. If you try the focus button again, it works. Pretty cool.

[02:57] Before we wrap up, there's one more refactoring I want to show you in order to give the component a better display name in the dev tools. Currently, it's forwardRef. This isn't very descriptive though. It doesn't show that the higher order component lock props is involved. We can do better.

[03:15] As a first step, we extract the function. Next up, we extract the name of the component and attach a custom display name for our forwardRef function using log props and wrapping the original component name.

[03:45] As you can see in the dev tools, the structure became much more clearer since it shows forwardRef lock props of text input.

https://app.egghead.io/api/v1/lessons/react-forward-a-dom-reference-to-another-component-using-forwardref-in-react-16-3/transcript