Forem: Ryan Aulia

React with TypeScript: 10 Pro Tips to Supercharge Your Code

Ryan Aulia — Thu, 22 Jun 2023 18:55:55 +0000

React and TypeScript are a powerful combination for building robust and scalable web applications. While React provides a flexible and efficient UI development framework, TypeScript adds static typing and enhances the development experience. In this article, we will explore ten essential tips that can help beginners improve their React TypeScript code. Each tip will be accompanied by a code example and a detailed explanation to ensure a clear understanding. Let's dive in!

1. Define PropTypes with TypeScript's type annotations

When using React with TypeScript, we can leverage type annotations to define prop types. This improves code readability, catches potential bugs, and enhances the development experience. Instead of using the PropTypes library, we can declare prop types directly in the component's interface or type definition. Here's an example:

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

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

2. Utilize React.FC for functional components

The React.FC type is a generic type provided by TypeScript that includes default prop types and children. Using it for functional components allows us to access these properties without explicitly defining them. Here's an example:

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, children }) => {
  // Component implementation
};

3. Leverage TypeScript's Enum for improved type safety

Enums in TypeScript are a great way to define a set of named values. Utilizing enums in React TypeScript code enhances type safety by restricting the possible values for certain props or variables. Here's an example:

enum ButtonSize {
  SMALL = 'small',
  MEDIUM = 'medium',
  LARGE = 'large',
}

interface ButtonProps {
  size: ButtonSize;
}

const Button: React.FC<ButtonProps> = ({ size }) => {
  // Component implementation
};

4. Use TypeScript's Union Types for flexible prop values

Union Types in TypeScript allow us to specify that a prop can have multiple accepted types. This flexibility is particularly useful when a component prop can accept different data types. Here's an example:

interface MessageProps {
  text: string | number;
}

const Message: React.FC<MessageProps> = ({ text }) => {
  // Component implementation
};

5. Take advantage of React's useRef with TypeScript

React's useRef hook is commonly used to reference DOM elements or store mutable values. When using useRef with TypeScript, we can specify the type of the referenced value, reducing the chances of type errors. Here's an example:

const MyComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  // Component implementation
};

6. Use TypeScript's Partial type for optional props

In React components, some props may be optional, meaning they don't have to be provided by the parent component. TypeScript's Partial type allows us to define props that are not required. Here's an example:

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

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

7. Apply TypeScript's Non-Nullable type for stricter null checks

In TypeScript, the Non-Nullable type can be used to ensure that a variable or prop is not null or undefined. This helps catch potential errors caused by null values. Here's an example:

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

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

8. Utilize TypeScript's Omit or Pick for prop manipulation

TypeScript provides the Omit and Pick utility types for manipulating existing types. Omit allows us to exclude specific properties, while Pick allows us to select specific properties from a type. Here are examples of each:

interface OriginalProps {
  name: string;
  age: number;
  email: string;
}

type ModifiedProps = Omit<OriginalProps, 'age'>; // Excluding the 'age' property

type NewProps = Pick<OriginalProps, 'name'>; // Selecting only the 'name' property

9. Leverage TypeScript's Readonly modifier for immutability

To enforce immutability, TypeScript provides the Readonly modifier, which makes object properties read-only. This can prevent accidental modification of props or state within a component. Here's an example:

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

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

10. Use TypeScript's Type Assertions for more flexibility

TypeScript's Type Assertions allow us to override the inferred type and provide a specific type for a variable or prop. While type assertions should be used with caution, they can be useful in certain scenarios. Here's an example:

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC = ({ name }: MyComponentProps) => {
  const length = (name as string).length; // Type assertion to ensure name is treated as a string

  // Component implementation
};

These ten tips provide beginner React TypeScript developers with valuable insights to enhance their code quality and development experience. By leveraging TypeScript's static typing and advanced features, we can write more robust and maintainable React applications. Incorporate these tips into your projects and witness immediate improvements in your code. Happy coding!

10 Tricks to Write Super Clean Code in TypeScript

Ryan Aulia — Thu, 22 Jun 2023 10:11:16 +0000

Writing clean and maintainable code is essential for any developer, regardless of their level of expertise. Clean code improves readability, enhances collaboration, and makes debugging easier. In the context of TypeScript, a statically-typed superset of JavaScript, clean code becomes even more important to take full advantage of the language's features. Whether you are a beginner or looking to improve your TypeScript skills, here are 10 tricks, along with examples, to help you write super clean code.

1. Use Descriptive Variable and Function Names:

// Bad example
const x = 5;
const y = 10;

function fn(a: number, b: number): number {
  return a + b;
}

// Good example
const width = 5;
const height = 10;

function calculateArea(length: number, breadth: number): number {
  return length * breadth;
}

2. Follow Consistent Formatting and Indentation:

// Bad example
function foo(){
console.log('Hello');
}

// Good example
function foo() {
  console.log('Hello');
}

3. Keep Functions Short and Focused:

// Bad example
function processUserData(user: User) {
  // Perform user authentication
  // Retrieve user's data
  // Update user's profile
  // Send email notifications
}

// Good example
function authenticateUser(user: User) {
  // Perform user authentication
}

function retrieveUserData(user: User) {
  // Retrieve user's data
}

function updateUserProfile(user: User) {
  // Update user's profile
}

function sendEmailNotification(user: User) {
  // Send email notifications
}

4. Apply Strong Typing:

// Bad example
function add(a, b) {
  return a + b;
}

// Good example
function add(a: number, b: number): number {
  return a + b;
}

5. Avoid Magic Numbers and Strings:

// Bad example
function calculateTax(income: number): number {
  return income * 0.2;
}

// Good example
const TAX_RATE = 0.2;

function calculateTax(income: number): number {
  return income * TAX_RATE;
}

6. Utilize TypeScript's Interfaces and Types:

// Bad example
function printUserDetails(user: any) {
  console.log(`Name: ${user.name}, Age: ${user.age}`);
}

// Good example
interface User {
  name: string;
  age: number;
}

function printUserDetails(user: User) {
  console.log(`Name: ${user.name}, Age: ${user.age}`);
}

7. Optimize Error Handling with TypeScript's Union Types:

// Bad example
function fetchData(url: string): Promise<any> {
  return fetch(url)
    .then((response) => response.json())
    .catch((error) => {
      console.error('Error occurred:', error);
    });
}

// Good example
type FetchResult = { data: any } | { error: string };

async function fetchData(url: string): Promise<FetchResult> {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return { data };
  } catch (error) {
    return { error: error.message };
  }
}

8. Apply Proper Code Comments:

// Bad example
const result = a + b; // Add a and b

// Good example
const sum = a + b; // Calculate the sum of a and b

9. Eliminate Code Duplication with Functions and Helpers:

// Bad example
function calculateArea(width: number, height: number): number {
  const area = width * height;
  console.log(`The area is ${area} square units.`);
  return area;
}

function calculatePerimeter(width: number, height: number): number {
  const perimeter = 2 * (width + height);
  console.log(`The perimeter is ${perimeter} units.`);
  return perimeter;
}

// Good example
function calculateArea(width: number, height: number): number {
  const area = width * height;
  return area;
}

function calculatePerimeter(width: number, height: number): number {
  const perimeter = 2 * (width + height);
  return perimeter;
}

function logResult(result: number, unit: string): void {
  console.log(`The ${unit} is ${result}.`);
}

const width = 5;
const height = 10;

const area = calculateArea(width, height);
logResult(area, 'area');

const perimeter = calculatePerimeter(width, height);
logResult(perimeter, 'perimeter');

10. Write Unit Tests:

// Bad example
function add(a: number, b: number): number {
  return a + b;
}

// Good example
function add(a: number, b: number): number {
  return a + b;
}

// Unit test
test('add function', () => {
  expect(add(2, 3)).toBe(5);
  expect(add(-1, 1)).toBe(0);
});

By applying these 10 tricks, you'll be well on your way to writing super clean code in TypeScript. Remember, clean code is a mindset and a practice that requires ongoing effort. As you gain experience and work on larger projects, refining your coding style and following best practices will become second nature. Happy coding!

Next.js Data Fetching: Optimize Performance with the Right Method

Ryan Aulia — Tue, 06 Jun 2023 03:09:47 +0000

Next.js, a popular React framework, provides powerful features for building server-rendered and statically generated web applications. One crucial aspect of web development is fetching data from APIs or databases. In this article, we will explore the different data fetching methods available in Next.js and understand when and how to use them. Whether you're a beginner or have some experience with Next.js, this guide will help you grasp the basics of data fetching in a simple and understandable manner.

Static Data Fetching

Static data fetching is ideal for content that remains unchanged across all requests. It involves fetching data at build time, enabling Next.js to pre-render the pages with the data. This approach ensures fast loading times and reduces the load on your server during runtime. To implement static data fetching, you can use Next.js' getStaticProps function.

Example:

// pages/index.tsx
import React from 'react';
import { GetStaticProps } from 'next';

interface HomeProps {
  data: string;
}

export const getStaticProps: GetStaticProps<HomeProps> = async () => {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
};

const HomePage: React.FC<HomeProps> = ({ data }) => {
  return (
    <div>
      <h1>Welcome to my website!</h1>
      <p>{data}</p>
    </div>
  );
};

export default HomePage;

In this example, the getStaticProps function fetches data from the specified API endpoint (https://api.example.com/data). The fetched data is then passed as a prop (data) to the HomePage component, which is pre-rendered at build time with the data.

Server-side Rendering (SSR)

Server-side rendering allows you to fetch data on each request made to the server. This method is useful when you need to display dynamic content that can change frequently. When a user visits a page, the server fetches the data and generates the HTML, which is then sent to the client. Next.js provides the getServerSideProps function to implement server-side rendering.'

Example:

// pages/post/[id].tsx
import React from 'react';
import { GetServerSideProps } from 'next';

interface PostProps {
  data: {
    title: string;
    body: string;
  };
}

export const getServerSideProps: GetServerSideProps<PostProps> = async (context) => {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params?.id}`);
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
};

const PostPage: React.FC<PostProps> = ({ data }) => {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
};

export default PostPage;

In this example, the getServerSideProps function fetches the data for a specific post based on the id parameter from the API endpoint (https://api.example.com/posts/[id]). The fetched data is then passed as a prop (data) to the PostPage component, which is rendered on the server-side for each request.

Client-side Rendering (CSR)

Client-side rendering is suitable for scenarios where data needs to be fetched after the initial page load. This method is commonly used for interactive components or when the data is not required for SEO purposes. With client-side rendering, the page is initially rendered without the data, and the data is fetched asynchronously on the client-side using JavaScript. Next.js supports client-side rendering through the useEffect hook or other libraries like React Query or SWR.

Example:

// pages/products.tsx
import React, { useEffect, useState } from 'react';

const ProductsPage: React.FC = () => {
  const [products, setProducts] = useState<string[]>([]);

  useEffect(() => {
    const fetchProducts = async () => {
      const res = await fetch('https://api.example.com/products');
      const data = await res.json();
      setProducts(data);
    };

    fetchProducts();
  }, []);

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product}>{product}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductsPage;

In this example, the useEffect hook is used to fetch the products data from the API endpoint (https://api.example.com/products). The fetched data is stored in the products state variable, which triggers a re-render of the component. The product names are then displayed in a list on the client-side.

Incremental Static Regeneration (ISR)

Incremental Static Regeneration combines the benefits of static and server-side rendering. It allows you to pre-render static pages at build time and then regenerate them periodically or on-demand. This approach is ideal for content that changes occasionally but doesn't require real-time updates. Next.js offers the revalidate option in getStaticProps to enable ISR.

Example:

// pages/blog/[slug].tsx
import React from 'react';
import { GetStaticProps, GetStaticPaths } from 'next';

interface BlogProps {
  data: {
    title: string;
    content: string;
  };
}

export const getStaticProps: GetStaticProps<BlogProps> = async (context) => {
  const { params } = context;
  const res = await fetch(`https://api.example.com/blog/${params?.slug}`);
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 60, // Re-generate page every 60 seconds
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch('https://api.example.com/blog');
  const data = await res.json();

  const paths = data.map((post: { slug: string }) => ({
    params: { slug: post.slug },
  }));

  return {
    paths,
    fallback: true,
  };
};

const BlogPage: React.FC<BlogProps> = ({ data }) => {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
};

export default BlogPage;

In this example, the getStaticProps function fetches the blog post data based on the slug parameter from the API endpoint (https://api.example.com/blog/[slug]). The fetched data is then passed as a prop (data) to the BlogPage component. Additionally, the getStaticPaths function is used to generate dynamic paths for all blog posts. The page will be re-generated every 60 seconds to ensure the content is up to date.

Conclusion:
Understanding the different data fetching methods in Next.js is essential for building efficient and performant web applications. By utilizing static data fetching, server-side rendering, client-side rendering, and incremental static regeneration, you can create responsive and optimized web experiences. Experiment with these approaches and choose the one that best suits your project's needs. Happy coding!

Introduction to Next.js: Building Modern Web App

Ryan Aulia — Mon, 05 Jun 2023 03:33:54 +0000

In recent years, web development has undergone a significant transformation, with a shift towards building dynamic and interactive applications. With the rise of Single-Page Applications (SPAs) and the demand for better performance and user experiences, developers are constantly seeking tools and frameworks that simplify the process of building robust web applications. Next.js, a popular React framework, has emerged as a powerful solution for building modern web applications with ease.

What is Next.js?

Next.js is an open-source framework for building web applications, created by Vercel (formerly known as Zeit). It is built on top of React and offers a powerful set of features that enable developers to build scalable and production-ready applications. Next.js provides a solution for server-side rendering (SSR) and static site generation (SSG), making it an excellent choice for applications that require fast loading times, SEO optimization, and a great user experience.

Key Features of Next.js:

Server-side rendering (SSR): One of the standout features of Next.js is its support for SSR. Unlike traditional client-side rendering, where the HTML is generated by the browser, SSR allows you to pre-render pages on the server and send them to the client already populated with data. This approach improves performance and ensures that search engines can easily index your content.
Static site generation (SSG): Next.js also supports SSG, which allows you to pre-render static pages at build time. This means that your application can benefit from the performance gains of serving static files, while still being able to fetch data dynamically when needed. SSG is particularly useful for content-driven websites or blogs.
Automatic code splitting: Next.js optimizes your application's performance by automatically splitting your JavaScript code into smaller chunks. Only the code necessary for each page is loaded, resulting in faster initial page loads and improved user experience. Additionally, Next.js optimizes assets for delivery, such as images and CSS, making your application even more efficient.
API routes: Next.js provides a built-in API routes feature that allows you to create serverless functions to handle server-side logic. This makes it easy to create custom APIs or backend functionality within your Next.js application, without the need for an additional server.
CSS support: Next.js offers various options for styling your applications, including CSS modules, styled-jsx, and support for popular CSS-in-JS libraries like styled-components and Tailwind CSS. This flexibility allows you to choose the styling approach that best suits your project.
Hot module replacement: Next.js includes a feature called Hot Module Replacement (HMR), which allows you to update your code in real-time without losing the application's state. This feature significantly speeds up the development process, as you can instantly see the changes reflected in the browser.

Getting Started with Next.js:

To start using Next.js, you'll need to have Node.js and npm (Node Package Manager) installed on your machine. You can then create a new Next.js project by running a simple command in your terminal:

npx create-next-app my-app

This command will set up a new Next.js project with all the necessary dependencies and a basic folder structure. From there, you can navigate to the project directory and start the development server:

cd my-app
npm run dev

Next.js will launch a development server and provide you with a local URL where you can access your application. You can then start building your Next.js application by creating pages, components, and leveraging the framework's powerful features.

Conclusion:

Next.js has quickly become a popular choice among developers for building modern web applications. Its support for server-side rendering, static site generation, and automatic code splitting makes it an excellent framework for creating fast, SEO-friendly applications. With its easy setup and integration with React, Next.js empowers developers to focus on building great user experiences while taking advantage of the latest web development techniques. Whether you're building a small personal website or a complex enterprise application, Next.js can be a valuable tool in your web development toolbox.