How to Effectively Annotate a React Functional Component with Props and State

Discover how to properly manage and annotate state and props in React functional components using TypeScript. Learn best practices for avoiding common errors and effectively using hooks.
---
This video is based on the question stackoverflow.com/q/66867745/ asked by the user 'samman adhikari' ( stackoverflow.com/u/8035772/ ) and on the answer stackoverflow.com/a/66867838/ provided by the user 'T.J. Crowder' ( stackoverflow.com/u/157247/ ) 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: How to annotate a react functional component with both props and states?

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

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Functional Components in React with TypeScript

React has become a powerful library for building user interfaces, primarily due to its component-based architecture. However, when it comes to managing state and properties, especially in functional components, developers often run into problems.

The Problem

In a recent scenario, a developer encountered an issue while trying to update the state of a child component from a parent component. The child component contained a button with an event handler defined in the parent component. After the event was triggered, the developer attempted to manipulate the child's state using a method that led to an error.

The error read:

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

This pointed to a misunderstanding regarding TypeScript's handling of functional components and their state.

The Source of the Confusion

Many developers are familiar with class-based components, where one can annotate both props and state using a specific structure like React.Component<TProps, TState>. This leads to the question: how do we handle state in functional components using React.FC?

The Solution

1. Understanding Props vs. State

First, it's crucial to differentiate between props and state:

Props: These are variables that are passed from the parent component to the child component. They are read-only and allow you to manage data and events.

State: This refers to the internal data of a component that can change. State can be modified within the component using hooks like useState.

2. Using Refs Correctly

An important point raised in the solution is about the nature of refs. When creating a ref using useRef, remember:

The ref might be pointing to a DOM element.

Even if it points to a child component instance, any methods (like setIsDataManipulated) need to be explicitly defined and bound.

3. Recommended Practices

Rather than trying to manage state directly in the child component, here's a better approach:

Lift the State Up: If the parent component needs to control certain pieces of state, those state variables should be defined in the parent and passed down to the child as props.

Use a Setter Function: If the child needs to inform the parent about changes, you can pass a setter function as prop. This way, the child component can invoke the setter to update the parent's state.

Example Implementation

Here’s a simple example illustrating this practice:

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

In this example:

The child component receives props for both state (isDataManipulated) and a setter function (setDataManipulated).

This maintains a clean and manageable approach to component communication.

Conclusion

Working with React functional components and TypeScript can be challenging, especially when dealing with state and props. By restructuring component designs and ensuring that state is managed effectively in parent components, you can avoid common pitfalls and make your code much cleaner and more efficient.

By following these best practices, you’ll not only resolve errors like the one encountered but also foster a more intuitive flow of data throughout your React application.