Скачать или смотреть Converting a React Class Component to a Functional Component Using useRef: Avoiding undefined Errors

Learn how to successfully convert a React class component to a functional component using `useRef`, and discover how to avoid the common `undefined` error associated with references.
---
This video is based on the question https://stackoverflow.com/q/65999924/ asked by the user 'Tester_Y' ( https://stackoverflow.com/u/9873632/ ) and on the answer https://stackoverflow.com/a/66000310/ provided by the user 'Linda Paiste' ( https://stackoverflow.com/u/10431574/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Converting class component to functional component using react hooks (useRef)—how to avoid "undefined" error

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Converting a React Class Component to a Functional Component Using useRef

In the world of React development, components play a crucial role in structuring your application. While class components have been a cornerstone of React, functional components have gained immense popularity thanks to their simplicity and the introduction of React Hooks. However, converting a class component to a functional component can sometimes lead to pitfalls, such as encountering undefined errors with refs.

In this guide, we'll tackle a common issue faced when converting a class component that uses refs into a functional component, specifically using the useRef hook. We’ll explore how to effectively implement this transition, ensuring you avoid the dreaded undefined error.

The Problem: undefined Error with useRef

When converting a component, one common error developers encounter is the "TypeError: Cannot read property 'rewardMe' of undefined." This happens when the reference created with useRef does not properly hold the instance of the component you’re trying to access.

The Original Class Component

Here’s a simplified version of how the original class component looks:

[[See Video to Reveal this Text or Code Snippet]]

The Solution: Converting to Functional Component

Step 1: Creating the useRef

In the functional component, the first step is to create a ref object using useRef. However, it's essential to initialize it correctly to avoid the undefined error.

Incorrect Initialization

Here’s how it is commonly initialized, which leads to the error:

[[See Video to Reveal this Text or Code Snippet]]

Issue

This will create a ref with an initial value of undefined, causing TypeScript to infer that the ref can only be undefined.

Correct Initialization

We can avoid the undefined error by initializing the ref to null, specifying its type:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Implementing the fakeRequest Function

Next, we need to rewrite the function that triggers the reward without passing the ref as an argument. Here’s the correct implementation:

[[See Video to Reveal this Text or Code Snippet]]

Why This Works

The ?. operator is a nullish coalescing operator. It safely calls rewardMe() only if current is not null, thus avoiding potential runtime errors.

Final Functional Component Code

Here is how the final functional component will look like:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Converting a class component to a functional component with useRef can initially seem daunting, especially when dealing with references and potential undefined errors. By ensuring that you initialize your refs properly and access them correctly, you can smoothly transition to functional components while leveraging the power of React Hooks.

With this knowledge, you'll be equipped to tackle similar challenges and continue improving your React skills. Happy coding!