React Function Components and TypeScript: Mastering the Advanced Techniques

Recently, there has been an increasing trend toward using React function components for building user interfaces.

In this post, we will break down everything you need to know about the React Function components.

Why are they preferred over class components?

The Advanced TypeScript Techniques for React Function Components.

And the Importance of using TypeScript with React Function Components.

So, let’s dive in.

What are React Function Components?

These are a type of component in the React JavaScript library that allow developers to create reusable pieces of code to build user interfaces. They are defined as plain JavaScript functions that return a React element or JSX (a syntax extension for JavaScript that allows for HTML-like code within JavaScript).

The React Function Components are typically used for simpler UI components and are favored due to the following reasons:

• Simplicity, efficiency, and ease of use. 
• Lightweight and faster than class components in React.

Moreover, with the introduction of React Hooks, function components have become even more powerful, allowing developers to use state and other React features without writing a class.

‍

Why use React Function Components over Class Components?

In React, there are two types of components that can be used to build the user interface: 

1. Class components 
2. Function components

While both types of components can achieve the same result, function components have become increasingly popular for a number of reasons.

• Simplicity: Function components are simpler and easier to understand than class components. They are less verbose and have a lower cognitive load, making them easier to read and maintain. This simplicity also makes them easier to write and debug.

• Performance: Function components are faster and more efficient than class components. They do not have the overhead of a class instance, which can lead to better performance in certain scenarios.

• Hooks: Function components can leverage the power of React Hooks. Hooks are a new addition to React that allows you to use state and other React features without writing a class. They are more flexible and reusable than class components.

• Functional Programming: Function components promote functional programming practices, which can lead to cleaner and more maintainable code. By focusing on pure functions, function components can be more predictable and easier to test.

‍Future-Proofing: Function components are the future of React. React has been moving towards function components since the introduction of Hooks. While class components will still work in React, function components are likely to be the standard going forward.

‍

The Advanced TypeScript Techniques for React Function Components:

React is the most popular JavaScript library for building user interfaces, and TypeScript is a powerful tool for adding type safety to JavaScript. Together, React and TypeScript can create scalable and maintainable applications. 

So, let's explore some advanced TypeScript techniques for React function components to create robust and type-safe components.

‍

1. Type definitions for Props

Function components in React receive props as their first argument. TypeScript allows you to define the type of the props object. This provides better type safety throughout the component.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
     interface Props {
      name: string;
      age: number;
    }
    
    const MyComponent: React.FC<Props> = ({ name, age }) => {
      return (
        <div>
          <h1>{name}</h1>
          <p>{age}</p>
        </div>
      );
    };
     

By defining the type of “Props”, we ensure that the component only receives the correct props. This approach helps to catch errors early and create more robust components.

‍

2. Default Props

Default props in React are values that are used if the prop is not explicitly provided. TypeScript can define the type of the default props object.

Copy
1
2
3
4
5
6
     interface Props {
      name: string;
      age: number;
      email?: string;
    }
     

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
     const defaultProps: Partial<Props> = {
      email: "example@example.com",
    };
    
    const MyComponent: React.FC<Props> = ({ name, age, email }) => {
      return (
        <div>
          <h1>{name}</h1>
          <p>{age}</p>
          <p>{email}</p>
        </div>
      );
    };
    
    MyComponent.defaultProps = defaultProps;
     

By using “Partial<Props>”, we indicate that the “email” prop is optional. By defining the default props object with the “Partial” type, we ensure that the default props object only contains optional props. By setting the “defaultProps” object to “MyComponent.defaultProps”, we ensure that the default props are used when the component is rendered without the prop.

‍

3. Children Prop

React components can receive children as props. TypeScript can define the type of the children prop.

Copy
1
2
3
4
5
6
7
8
     interface Props {
      children: React.ReactNode;
    }
    
    const MyComponent: React.FC<Props> = ({ children }) => {
      return <div>{children}</div>;
    };
     

By using “React.ReactNode”, we indicate that the component can receive any valid React node as its children. This approach helps to create reusable and flexible components.

‍

4. Event Handlers

In React, event handlers are commonly used to handle user interactions. TypeScript can define the type of event handlers.

Copy
1
2
3
4
5
6
7
8
     interface Props {
      onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
    }
    
    const MyComponent: React.FC<Props> = ({ onClick }) => {
      return <button onClick={onClick}>Click me</button>;
    };
     

By defining the type of the “onClick” prop, we ensure that the prop is an event handler for the “button” element. By using “void”, we indicate that the event handler does not return a value. This approach helps to create more predictable and maintainable code.

‍

5. Refs

In React, refs are used to get a reference to a component or element. TypeScript can define the type of the ref.

Copy
1
2
3
4
5
6
7
8
     interface Props {
      inputRef: React.RefObject<HTMLInputElement>;
    }
    
    const MyComponent: React.FC<Props> = ({ inputRef }) => {
      return <input type="text" ref={inputRef} />;
    };
     

By using “React.RefObject<HTMLInputElement>”, we indicate that the “inputRef” prop is a ref to an “input” element. This approach helps to create more reusable and flexible components.

In conclusion, these advanced TypeScript techniques for React function

‍

Importance of using TypeScript with React Function Components:

TypeScript with React Function Components has several key benefits such as Type safety, Improved code readability, Better tooling, Easy collaboration, and Enhance scalability.

‍

We can better understand this through the below example:

Imagine you're building a React app that allows users to search for and book flights. As you're building the app, you realize that the data structure for a flight reservation is quite complex, with nested objects and arrays.

If you were using plain JavaScript, you might run into issues with type mismatches or null values, which could cause runtime errors and impact the user experience.

However, if you were using TypeScript with React Function Components, you could define interfaces that describe the shape of your flight reservation data, like so:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
     interface FlightReservation {
      flightNumber: string;
      departureTime: Date;
      arrivalTime: Date;
      passengers: Passenger[];
      // ...other properties
    }
    
    interface Passenger {
      firstName: string;
      lastName: string;
      age: number;
      // ...other properties
    }
     

By defining these interfaces, you're not only making the code more readable and understandable, but you're also providing static type checking that can help catch errors early in the development process.

For example, if you tried to assign a string to the “passengers” property instead of an array of “Passenger” objects, TypeScript would raise an error and prevent the code from compiling. This can save you valuable debugging time and ensure that your code is always reliable.

In addition to type safety, TypeScript provides better tooling that can help improve developer productivity. For example, you can use Visual Studio Code to get autocomplete suggestions, hover over variables to see their type and more.

Overall, using TypeScript with React Function Components is a powerful tool for building complex, scalable, and reliable React applications.

‍

Upgrade Your React App Development using Advanced TypeScript Techniques with DhiWise !

In the blog you have learned about the React Function Components, why they are preferred over the class components, the advanced TypeScript techniques, and the importance of using TypeScript with React Function Components. 

By incorporating these techniques into your React development workflow, you can take your skills to the next level and build more robust, efficient, and scalable apps. 

Moreover, you can accelerate your app development with DhiWise React Builder . The platform supports both TypeScript and JavaScript. It offers advanced features for Figma design to code generation, UI customization, team collaboration, code sharing as well as deployment. 

So why wait? Start implementing your knowledge into the React project today with DhiWise and see the difference it can make for you and your team.

Happy coding!