DEV Community

Cover image for Best Practices of ReactJS with TypeScript
Deepesh Kumar
Deepesh Kumar

Posted on

Best Practices of ReactJS with TypeScript

Introduction

ReactJS and TypeScript are powerful technologies that can be combined to create robust and type-safe applications. This tech document outlines the best practices to follow when using ReactJS with TypeScript. These practices aim to enhance code quality, maintainability, performance, and overall development experience.

Table of Contents

  1. Enable Strict Mode
  2. Type Annotations for Props and State
  3. Functional Components and React Hooks
  4. Use TypeScript Utility Types
  5. Avoid Any Type
  6. Error Handling with Custom Types
  7. Use Generic Components
  8. Avoid Unnecessary Type Assertions
  9. Consistent Naming Conventions
  10. Use Third-Party Libraries with TypeScript Support
  11. Optimization Techniques
  12. Component Design Patterns
  13. Debounce and Throttle Event Handlers
  14. Conditional Rendering
  15. Immutability

1. Enable Strict Mode

Enable strict mode in the TypeScript configuration to enforce strict type checking and catch potential errors at compile-time. This can be done by setting "strict": true in the tsconfig.json file.

// tsconfig.json
{
  "compilerOptions": {
    "strict": true
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Type Annotations for Props and State

Always provide type annotations for component props and state to ensure type safety and improve code readability. Use interfaces or types to define the shape of props and state objects.

interface MyComponentProps {
  name: string;
  age: number;
}

interface MyComponentState {
  isOpen: boolean;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  // Component implementation
};
Enter fullscreen mode Exit fullscreen mode

3. Functional Components and React Hooks

Prefer functional components over class components whenever possible. Use React hooks (e.g., useState, useEffect) to manage state and lifecycle behavior in functional components.

import React, { useState, useEffect } from 'react';

interface CounterProps {
  initialCount: number;
}

const Counter: React.FC<CounterProps> = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    // Do something when count changes
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

4. Use TypeScript Utility Types

Take advantage of TypeScript's utility types to simplify common type transformations. Utility types like Partial, Required, Pick, and Omit can be used to modify and compose types efficiently.

interface User {
  id: number;
  name: string;
  email: string;
}

type PartialUser = Partial<User>; // All properties become optional
type

 RequiredUser = Required<User>; // All properties become required
type UserWithoutEmail = Omit<User, 'email'>; // Exclude 'email' property
Enter fullscreen mode Exit fullscreen mode

5. Avoid Any Type

Avoid using the any type as much as possible. Instead, provide explicit types or use union types to handle cases where the type can be more than one possibility.

const fetchData = (): Promise<User[]> => {
  // Fetch user data from an API
};

const handleData = (data: User[] | null) => {
  // Handle data
};
Enter fullscreen mode Exit fullscreen mode

6. Error Handling with Custom Types

Use custom types to represent different error states in asynchronous operations. This allows for more expressive error handling and ensures the proper handling of error cases.

type AsyncResult<T, E> = { loading: boolean; data: T | null; error: E | null };

const fetchUserData = (): AsyncResult<User[], string> => {
  // Fetch user data and handle errors
};
Enter fullscreen mode Exit fullscreen mode

7. Use Generic Components

Create generic components to enhance reusability and type safety. Generic components can handle different data types while maintaining type checking at compile-time.

interface ListItem<T> {
  item: T;
}

const ListItemComponent: React.FC<ListItem<User>> = ({ item }) => {
  // Render item
};
Enter fullscreen mode Exit fullscreen mode

8. Avoid Unnecessary Type Assertions

Avoid using type assertions (as) unless absolutely necessary. Instead, leverage TypeScript's type inference capabilities and provide explicit types to ensure type safety.

const result: number = calculateValue() as number; // Unnecessary type assertion

const result: number = calculateValue(); // Preferred approach with explicit type
Enter fullscreen mode Exit fullscreen mode

9. Consistent Naming Conventions

Follow consistent naming conventions for components, props, and variables. Use meaningful and descriptive names to improve code readability and maintainability.

interface UserProfileProps {
  user: User;
}

const UserProfile: React.FC<UserProfileProps> = ({ user }) => {
  // Component implementation
};

const getUserData = (): Promise<User> => {
  // Fetch user data
};
Enter fullscreen mode Exit fullscreen mode

10. Use Third-Party Libraries with TypeScript Support

Prefer third-party libraries that provide TypeScript support and type definitions. TypeScript support ensures better integration with your codebase and helps catch potential issues early on.

Ensure that the installed types match the library version and use the correct import statements to import types from the library.

import { Button } from 'third-party-library'; // Importing component
import { User } from 'third-party-library/types'; // Importing types
Enter fullscreen mode Exit fullscreen mode

11. Optimization Techniques

To optimize ReactJS applications, consider the following techniques:

  • Use the React.memo Higher Order Component (HOC) to memoize functional components and prevent unnecessary re-renders.
  • Utilize the useCallback hook to memoize event handlers and prevent unnecessary re-creation of functions.
  • Use the useMemo hook to memoize expensive computations and avoid redundant calculations.
const MyComponent: React.FC<Props> = React.memo(({ propA, propB }) => {
  // Component implementation
});
Enter fullscreen mode Exit fullscreen mode

12. Component Design Patterns

Consider using the following component design patterns to structure your ReactJS

application:

  • Container-Component Pattern: Separate container components (smart components) responsible for handling data and business logic from presentational components (dumb components) responsible for rendering UI elements.
  • Render Prop Pattern: Use the render prop pattern to share code and data between components by passing a function as a prop that returns JSX.
  • Higher-Order Component (HOC) Pattern: Use HOCs to add additional functionality or modify behavior of existing components.
  • Provider Pattern: Use React context API to provide data and state to multiple components without prop drilling.

13. Debounce and Throttle Event Handlers

When handling events that can trigger frequent updates (e.g., scroll, resize), consider using debounce or throttle techniques to optimize performance and prevent excessive updates.

import { debounce } from 'lodash';

const handleScroll = debounce(() => {
  // Handle scroll event
}, 200);

window.addEventListener('scroll', handleScroll);
Enter fullscreen mode Exit fullscreen mode

14. Conditional Rendering

Use conditional rendering techniques to control the visibility and behavior of components based on certain conditions. This can be achieved using conditional statements, ternary operators, or logical && operator.

const MyComponent: React.FC<Props> = ({ isLoggedIn }) => {
  return isLoggedIn ? <AuthenticatedComponent /> : <GuestComponent />;
};
Enter fullscreen mode Exit fullscreen mode

15. Immutability

Follow the principle of immutability when updating state or props. Avoid directly mutating objects or arrays, as it can lead to unexpected behavior. Instead, create new copies of objects or arrays using immutable techniques like spread operators or immutable libraries.

const updateItem = (index: number, newItem: Item) => {
  const updatedItems = [...items];
  updatedItems[index] = newItem;
  setItems(updatedItems);
};
Enter fullscreen mode Exit fullscreen mode

Conclusion

By following these best practices, you can enhance your ReactJS with TypeScript projects, improve code quality, maintainability, and performance, and leverage the full potential of these technologies. Remember to adapt these practices based on your project's specific needs and requirements.

Top comments (6)

Collapse
 
m_olea_1d593c0aa61b80db82 profile image
m olea

Excellent!!

Collapse
 
riyadfebrian profile image
Riyad Febrian

i will comeback here.

nice article

Collapse
 
islombekfd profile image
Islombek_Qurbonov

Good article

Collapse
 
darthroman profile image
darth-roman

Thank you for this article ๐Ÿ˜

Collapse
 
_e1bb2fbb962254aef9fb4e profile image
์ผ€๋นˆ

Thank you...!!

Collapse
 
moormoorr profile image
Rendra

nice sharing