DEV Community: Deepesh Kumar

Best Practices of ReactJS with TypeScript

Deepesh Kumar — Tue, 06 Jun 2023 13:11:11 +0000

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.

Enable Strict Mode
Type Annotations for Props and State
Functional Components and React Hooks
Use TypeScript Utility Types
Avoid Any Type
Error Handling with Custom Types
Use Generic Components
Avoid Unnecessary Type Assertions
Consistent Naming Conventions
Use Third-Party Libraries with TypeScript Support
Optimization Techniques
Component Design Patterns
Debounce and Throttle Event Handlers
Conditional Rendering
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
  }
}

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
};

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>
  );
};

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

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
};

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
};

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
};

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

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
};

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

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
});

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);

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 />;
};

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);
};

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.

Write Unit tests using ChatGPT

Deepesh Kumar — Sat, 25 Feb 2023 07:15:24 +0000

Writing unit tests can be a challenging task for developers. It is crucial to ensure that the code is functional and free from bugs. However, the process of writing tests can be time-consuming, especially when dealing with complex code. In this article, we will discuss a solution to this problem using OpenAI's natural language processing capabilities to generate unit tests.

TL;DR In this article, we will discuss how to integrate the OpenAI GPT language model with a Node.js application to generate unit test case for custom code.

What is OpenAI GPT?

The OpenAI GPT (Generative Pre-trained Transformer) language model is a state-of-the-art machine learning model that has been pre-trained on vast amounts of text data. It is capable of generating human-like text data, making it an ideal tool for a wide range of applications, including chatbots, language translation, and content generation.

Node and OpenAI GPT

Node.js is a popular runtime environment for building server-side applications using JavaScript. It provides a wide range of features and packages that make it an excellent choice for building scalable and high-performance applications. One of the most exciting developments in recent years has been the rise of natural language processing (NLP) and machine learning (ML) technologies, which have revolutionised the way we interact with and process text data. In this article, we will discuss how to integrate the OpenAI GPT language model with a Node.js application to generate unit test case for custom code.

Integrating ChatGPT with Node.js for writing Unit testcases

To integrate OpenAI GPT with a Node.js application, we can use the OpenAI API, which provides a RESTful interface for interacting with the language model. Here's an example of how to use the OpenAI API to generate text data in a Node.js application

First, we need to create an account on the OpenAI website and obtain an API key. here

Next, we need to install the "openai" package using NPM, which provides a client for the OpenAI API.

npm install openai

Once the package is installed, we can use it to create a client object that can be used to interact with the OpenAI API:

 const openai = require('openai')('YOUR_API_KEY')

To generate text data using the OpenAI GPT model, we need to create a prompt that describes what we want the model to generate. Here's an example of a prompt

const unitTestPrompt = `I have the following file, write me unit tests using jest.
        Here is the file:
        ${req.body.promptText}`;

Next, we can use the OpenAI client to generate text data based on the prompt

const completion = await openai.createCompletion({
  model: "text-davinci-003",
  prompt: unitTestPromt,
  max_tokens: 2018,
  logprobs: 0,
  best_of: 1,
  temperature: 0,
  top_p: 1,
  frequency_penalty: 0.5,
  presence_penalty: 0,
});

we are using the "createCompletion" method of the OpenAI client to generate text data. We specify the language model we want to use ("davinci"), the prompt we created earlier, the maximum number of tokens to generate (1024), the number of responses to generate (1), and the "temperature" parameter, which controls the randomness of the generated text.

Below is the code in action, We generated unit test for a factorial function

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
};

Finally, here is the complete JavaScript code.

It defines a route for '/unit-test' which accepts a POST request with a promptText field in the request body. The promptText is then used to create a GPT-3 prompt with a specific format that instructs the language model to generate unit tests for the file described in the promptText.