Forem: Ayantunji Timilehin

The Biggest Mistakes Frontend Developers Make in Code Reviews

Ayantunji Timilehin — Thu, 13 Feb 2025 01:09:18 +0000

Code reviews can be a game changer for frontend teams when done right. They help catch bugs before they reach production, improve code quality, and spread knowledge across the team. But too often, reviews turn into a frustrating nitpick session.

If you've ever been part of a code review that felt like a waste of time (or worse, an unnecessary headache), you're not alone. Here are some of the biggest mistakes frontend developers make during code reviews and how to fix them.

1. Focusing on Style Instead of Substance

We’ve all seen it happen - a review thread turns into a debate about tabs vs. spaces, or whether a function should be named fetchData or getData

How to fix it:

Automate style enforcement. Use tools like ESLint and Prettier so reviewers don’t have to comment on formatting.
Prioritize what matters. Focus on functionality, performance, security, and maintainability. Style should only be an issue if it affects readability or introduces inconsistencies.

2. Not Testing the Code Locally

It’s tempting to skim through the code and approve it if everything looks okay. But code that looks fine in a GitHub diff can behave unexpectedly when you actually run it.

How to fix it:

Pull the branch and test the changes yourself. Click around, try edge cases, and make sure the feature works as expected.
Use browser dev tools. Check for performance issues, console errors, and accessibility problems.
Run the tests. If tests are included, make sure they actually pass.

3.Ignoring Performance Implications

Frontend performance matters a lot. A piece of code might work but still introduce subtle performance issues like unnecessary re-renders, large bundle sizes, or excessive API calls.

How to fix it:

Look out for inefficient state updates. Is this new component causing unnecessary re-renders? Should it be memoized?
Check for bloated dependencies. Did the PR introduce a heavy library for something that could have been done natively?
Test for responsiveness. Does the new code affect load times, animations, or interactions?

4. Skipping Accessibility Checks

Accessibility (a11y) is often treated as an afterthought until a user with a disability struggles with your app. Basic mistakes like missing alt text, poor contrast, or broken keyboard navigation can make an app unusable for many people.

How to fix it:

Test with a screen reader. Can you navigate and understand the content without a mouse?
Use accessibility tools. Run the code through Lighthouse or axe DevTools to catch common issues.
Check keyboard navigation. Can users tab through elements properly? Is focus managed correctly?

5. Giving Unhelpful Feedback

Bad code reviews aren’t just about what you say, but how you say it. Vague comments like “this looks wrong” or “fix this” don’t help anyone, and overly harsh critiques can demoralize developers instead of helping them improve.

How to fix it:

Be specific. Instead of “this is bad,” explain why: “This function is doing too many things—can we break it into smaller parts?”
Ask questions. Instead of assuming something is wrong, ask for clarification: “Is there a reason we used useEffect here instead of an event listener?”
Use a collaborative tone. Think of code reviews as discussions, not personal attacks. Frame feedback as suggestions, not orders.

6. Not Reviewing Tests (or Not Having Any at All)

A new feature without tests is a future bug waiting to happen. Yet, many developers skip reviewing test coverage or worse, ignore the fact that no tests were added.

How to fix it:

Check if tests exist. If a new feature is added, does it have test coverage? If not, ask why.
Ensure tests cover edge cases. Do the tests only check the happy path, or do they also account for errors and edge cases?
Encourage meaningful tests. Avoid snapshot tests that just confirm markup hasn’t changed. Instead, focus on behavior-driven tests.

7. Not Considering Long-Term Maintainability

A piece of code might work today, but will it be easy to update six months from now? Will a new developer joining the team understand what it does?

How to fix it:

Check for unnecessary complexity. Is this solution more complicated than it needs to be? Could it be simplified?
Look for reusable patterns. Does this introduce duplicate code that could be extracted into a reusable component or function?
Encourage documentation. If a piece of logic is non-obvious, suggest adding a comment or updating the documentation.

Final Thoughts

Code reviews should be about improving code, not just finding flaws. They’re a chance to share knowledge, spot potential issues early, and help the whole team level up.

By avoiding these common mistakes, focusing on what matters, giving constructive feedback, and thinking about long-term maintainability, you can make your code reviews more effective and enjoyable for everyone involved.

Fixing TypeScript Errors in React Forms

Ayantunji Timilehin — Mon, 04 Nov 2024 11:59:11 +0000

Introduction

Recently, while developing a React application that utilized @hookform/resolvers and yup, I encountered a frustrating barrier: TypeScript errors that stalled my progress. I found myself wrestling with type issues that disrupted my flow and made it difficult to move forward. At one point, I considered the infamous @ts-ignore directive a quick fix, but I quickly realized this was not the right approach. Instead, I embarked decided to resolve the underlying issues without compromising the integrity of my code.

Why I Avoided `@ts-ignore`

Using @ts-ignore to silence the compiler is tempting, especially when you're on a tight deadline. However, I’ve learned that littering my code with these directives creates a façade of functionality while masking real problems. I wanted to build a solution that not only worked but also adhered to TypeScript’s strengths in catching type-related bugs. I knew there had to be a more sustainable way to tackle the issues at hand.

The Challenge: Identifying the Root Cause

As I dug deeper, I discovered that the TypeScript errors were due to compatibility issues between the versions of @hookform/resolvers and yup. This wasn’t the first time I had encountered such challenges, but each experience teaches me something new. It became clear that understanding these dependencies was crucial to my development process.

A Hands-On Approach to Resolution

Instead of opting for @ts-ignore, I decided to downgrade my @hookform/resolvers version to align it with yup. Here’s how I navigated through this:

Check for Compatible Versions: I ran npm info @hookform/resolvers to see the available versions and identify which one was compatible with my current yup version.

2.) Downgrade to a compatible version: I ran npm install @hookform/resolvers@3.1.1 to get the compatible package.

3.)Verify the Fix: After making the changes, I recompiled my project, and to my relief, the TypeScript errors disappeared.

Additional Tips for Fellow Developers

Through this experience, I’ve gathered a few tips that might help others facing similar issues:

1.) Regular Dependency Audits: Frequently check for outdated packages with npm outdated. Understanding the compatibility landscape can save you a lot of headaches.

2.) Branch for Testing: When dealing with potentially breaking changes, create a separate branch to test updates. This practice keeps your main project safe from unexpected errors.

3.) Configure TypeScript Thoughtfully: While options like skipLibCheck can sometimes alleviate issues, use them judiciously to maintain type safety in your project.

Conclusion

While using @ts-ignore can feel like a tempting quick fix, it’s not a long-term solution. It might silence the error temporarily, but it doesn’t actually resolve the underlying problems. By facing the version mismatches directly and carefully managing my dependencies, I was able to fix the issue and build a stronger application overall. I hope my experience sheds some light on your own development hurdles and encourages you to dig a little deeper for those genuine solutions!

Essential Helper Functions for Your JavaScript Projects

Ayantunji Timilehin — Fri, 31 May 2024 20:53:37 +0000

When working on various JavaScript projects, I often find myself needing some handy helper functions to simplify repetitive tasks. Below are some of the helper functions that have proven to be very useful in my projects. These functions cover a range of tasks from string manipulation to number checks and date formatting.

1. Capitalize the First Letter of a String

This function takes a string and capitalizes the first letter while converting the rest of the string to lowercase. This is particularly useful for formatting names or titles.

export const capitalizeFirstLetter = (word?: string) => {
  return word ? word.charAt(0).toUpperCase() + word.toLocaleLowerCase().slice(1) : '';
};

2. Format an Array to a Sentence

When you have an array of strings that you need to format as a sentence, this function joins the array elements with commas and replaces the last comma with "and".

export const formatArrayToSentence = (stringArr: string[]) => {
  if (!stringArr?.length) return '';

  return stringArr.join(', ').replace(/, ([^,]*)$/, ' and $1.');
};

3. Format Date

This function uses the moment library to format dates. It can format a date to DD/MM/YYYY or to a time format HH:mm A based on the isTime flag.

import moment from 'moment';

export const formatDate = (date: string, isTime = false) => {
  if (!date) return '';
  const parsedDate = moment(date);

  if (isTime) return parsedDate.format('HH:mm A');

  return parsedDate.format('DD/MM/YYYY');
};

4. Truncate Text

To shorten a text string to a specified length and append an ellipsis (...), use this function. It ensures the text does not exceed the desired length.

export const truncateText = (text: string, maxLength: number) => {
  if (text.length <= maxLength) return text;
  return text.substring(0, maxLength) + '...';
};

5. Check for Uppercase, Lowercase, Numbers, and Special Characters

These functions use regular expressions to check if a string contains at least one uppercase letter, one lowercase letter, one number, or one special character. These are particularly useful for password validation.

export const containsAtleastOneUpperCase = (val: string) => /(?=.*?[A-Z])/.test(val);

export const containsAtleastOneLowerCase = (val: string) => val ? /(?=.*?[a-z])/.test(val) : false;

export const containsAtleastOneNumber = (val: string) => /(?=.*[0-9])/.test(val);

export const containsAtLeastOneSpecialChar = (val: string) => /(?=.*[$&+,:;=?@#|'<>.^*_()%!-])/.test(val);

6. Check if a Number is Even or Odd

These simple functions check if a number is even or odd.

export const isEven = (number: number) => (number ? number % 2 === 0 : false);

export const isOdd = (number: number) => number % 2 !== 0;

7. Check for Non-Empty Object

This function checks if an object is not empty, which is useful for validating that an object has properties before performing operations on it.

export const isNonEmptyObject = (obj: Record<string, unknown>) => {
  return typeof obj === 'object' && obj !== null && Object.keys(obj).length > 0;
};

Conclusion

These helper functions are designed to make common tasks easier and your code more readable. By incorporating them into your projects, you can save time and ensure consistency across your codebase. Whether it's formatting strings, validating inputs, or checking object properties, these utilities cover a broad range of use cases that are essential in everyday JavaScript development.

Creating a Table Component in React with Tailwind CSS

Ayantunji Timilehin — Thu, 30 May 2024 23:28:49 +0000

Introduction

Building a reusable and customizable table component in React can significantly streamline your development process, especially when working on data-driven applications. Leveraging Tailwind CSS for styling ensures that your table is both stylish and responsive. In this article, we'll walk through the steps to create a fully functional table component in React using Tailwind CSS.

Prerequisites

Before we begin, ensure you have the following set up:

Node.js and npm installed.
A React project set up. You can create one using Create React App:

npx create-react-app react-tailwind-table
cd react-tailwind-table

Tailwind CSS installed and configured. Follow the official Tailwind CSS installation guide for React.

Step 1: Setting Up Tailwind CSS

First, set up Tailwind CSS in your React project. If you haven't already, follow these steps:

Install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS:

npx tailwindcss init -p

Configure tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind CSS directives to src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 2: Creating the Table Component

Create a new file Table.js in the src/components directory. This component will be responsible for rendering the table.

import React from 'react';

const Table = ({ columns, data }) => {
  return (
    <div className="overflow-x-auto">
      <table className="min-w-full bg-white border border-gray-200">
        <thead className="bg-gray-200">
          <tr>
            {columns.map((column) => (
              <th
                key={column.accessor}
                className="py-2 px-4 border-b border-gray-200 text-left text-gray-600"
              >
                {column.Header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, rowIndex) => (
            <tr key={rowIndex} className="even:bg-gray-50">
              {columns.map((column) => (
                <td
                  key={column.accessor}
                  className="py-2 px-4 border-b border-gray-200 text-gray-800"
                >
                  {row[column.accessor]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;

Explanation

Props:

columns: An array of objects defining the headers and accessors for the table columns.
data: An array of objects representing the rows of data to display.

Table Structure

The table is wrapped in a div with overflow-x-auto to ensure it is scrollable on smaller screens.
The table element uses Tailwind CSS classes for styling.
The thead contains the table headers, which are dynamically generated from the columns prop.
The tbody contains the table rows, dynamically generated from the data prop. Each row alternates background colors using the even:bg-gray-50 class.

Step 3: Using the Table Component

Now, let's use the Table component in our application. Update src/App.js to include the table component with sample data.

import React from 'react';
import Table from './components/Table';

const App = () => {
  const columns = [
    { Header: 'Name', accessor: 'name' },
    { Header: 'Age', accessor: 'age' },
    { Header: 'Email', accessor: 'email' },
  ];

  const data = [
    { name: 'John Doe', age: 28, email: 'john@example.com' },
    { name: 'Jane Smith', age: 34, email: 'jane@example.com' },
    { name: 'Mike Johnson', age: 45, email: 'mike@example.com' },
  ];

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">User Table</h1>
      <Table columns={columns} data={data} />
    </div>
  );
};

export default App;

Explanation

The columns array defines the table headers and the keys to access each column's data in the data array.
The data array contains the sample data to be displayed in the table.
The Table component is rendered inside a div with Tailwind CSS classes for padding and styling.

Conclusion

You've now created a reusable and customizable table component in React using Tailwind CSS. This component can easily be extended with additional features such as sorting, filtering, and pagination. By leveraging the power of Tailwind CSS, you ensure that your table is responsive and visually appealing across different screen sizes.

Mastering the CSS Box Model: A Comprehensive Guide for Web Developers

Ayantunji Timilehin — Sat, 13 Apr 2024 11:12:34 +0000

Introduction

In my years of experience as a web developer, I've encountered a common challenge among developers: grappling with the intricacies of the CSS box model. Despite its fundamental importance, many developers, both novice and seasoned, often struggle to grasp its nuances fully. In this comprehensive guide, we'll embark on a journey to demystify the CSS box model, exploring its components and properties in detail. Whether you're just starting your journey in web development or seeking to deepen your expertise, this guide is your ultimate companion to mastering the CSS box model.

Ever wondered how web developers create those neatly organized layouts you see on websites? It all comes down to something called the CSS box model. Essentially, every element on a webpage is treated like a rectangular box, and understanding how these boxes work is key to crafting visually appealing and well-structured designs. It's like being handed a set of building blocks and learning how to arrange them to build a sturdy structure. So, let's roll up our sleeves and delve into the world of the CSS box model!

Let's break it down:

At the heart of the CSS box model are four essential components: content, padding, border, and margin. Think of them as layers that define the space and appearance of each element.

First up, we have the content area. This is where the actual content of the element resides – whether it's text, images, or other embedded elements. The size of this area is determined by the width and height properties, essentially forming the core of the box.

Next, we have padding, which acts as a buffer zone between the content and the border of the element. It's like adding a bit of cushioning around the edges to give your content some breathing room. You can adjust the padding using the padding property in CSS, allowing for precise control over the spacing.

Moving on to the border – this is the visible outline that surrounds the padding area. Borders come in different styles, thicknesses, and colors, and they help define the visual boundaries of each element on the page. You can customize borders using properties like border-width, border-style, and border-color to achieve the desired look.

Last but not least, we have margins. Margins are the spaces outside the border of an element, creating separation between elements on the page. They're like the invisible force fields that keep things from getting too crowded. Similar to padding, you can adjust margins using the margin property in CSS.

Image Source: CssTerm

Conclusion

In conclusion, mastering the CSS box model is a crucial skill for any web developer. By comprehending the interplay between its four components – content, padding, border, and margin – you gain the ability to craft visually appealing and user-friendly websites. With this knowledge in your toolkit, you'll be equipped to tackle layout challenges with confidence and precision. So, embrace the CSS box model as your ally in web development, and let your creativity flourish. Happy coding!

Building Web Applications: A Comprehensive Guide to Structuring Next.js Projects

Ayantunji Timilehin — Thu, 11 Apr 2024 20:17:36 +0000

Structuring Next.js applications is a crucial aspect of web development that can significantly impact the efficiency, scalability, and maintainability of a project. While Next.js provides flexibility in how you organize your code, having a well-thought-out structure can streamline development workflows and make collaboration easier. In this article, we’ll explore my current most preferred approach (as there is no one-size-fits-all approach) of structuring Next.js applications. Whether you’re starting a new project or looking to improve an existing one, understanding how to structure your Next.js application effectively is essential for success.

Streamlining Development Workflows

A clear project structure streamlines development workflows in several ways:

Faster Onboarding: New team members can quickly familiarize themselves with the project structure, coding conventions, and best practices, enabling them to become productive contributors sooner.
Consistent Development: A consistent project structure encourages uniformity in coding styles, file organization, and directory layouts across the codebase. This minimizes confusion and ensures that developers follow established patterns and guidelines.
Automated Tooling: Many development tools and frameworks rely on conventions and standardized project structures to automate tasks such as code generation, testing, and deployment. By adhering to these conventions, you can leverage these tools to enhance productivity and reduce manual effort.

Taking a deep dive into the file structure:
When you install Next.js, it sets up a project structure that looks something like this:

In the final setup we would have much more than these folders as we’d create some now folders and files for proper separation of concerns.

In the public folder, you should place assets such as images that are utilized within the application. This directory serves as the location for static files like images that are directly served to the client.

The src folder serves as the central hub for most of the project's activities and contains several other folders including the app , components context hooks modules services styles types and utils folders.

The app folder: The app folder holds the main application logic, including pages, and layouts. Pages represent individual routes or views of the application and layouts define the overall structure of different sections of the app.

The components folder: In my approach, I prefer organizing components based on their respective modules. For instance, the “savings” module would have its own components folder, containing all components specific to savings. Additionally, I maintain a “shared” folder within the components directory, housing components utilized across the entire application, such as buttons.

To streamline component imports, I include a root index file within each folder. This allows me to easily export components for use in other files

Take for example a simple Button component and a Card component placed in the “shared” folder.

export const Button = () => {
  return <div>Button</div>;
};

export const Card = () => {
  return <div>Card</div>;
};

The root index file in the “shared” folder would have all of these exported as:

export * from "./Button";
export * from "./Card";

Now, if I have to use these components in any file in the app, I would need just one line of import statement like:

import { Button, Card } from './components/shard

The context folder: The context folder is dedicated to managing global state within the application. This folder typically houses the logic related to state management using tools like Redux or React Context API. The name of the folder can vary based on personal preference and the specific state management library being used.

The hooks folder: serves as a centralized location for storing custom hooks that can be reused across different parts of the application. Similar to the components folder, I maintain a consistent approach to importing and exporting hooks, ensuring easy accessibility throughout the app.

The modules folder: In the modules folder, you’ll find files for all the pages rendered in the application, including any nested routes. Each module gets its own folder named after it, containing all its related pages and any nested pages.

The styles folder: In the styles folder, we keep all our CSS or styling-related files. This includes global styles, theme files, and any other CSS modules or utility classes used throughout the application. I With the use of Tailwind CSS, we often write minimal custom CSS, as Tailwind provides a comprehensive set of utility classes for styling components.

The services folder: In the services folder, we handle interactions with external services or APIs. Each module typically has its own file within the services folder to organize API calls related to that module. For instance, the authApi.ts file would contain functions like registration and login API calls. This modular approach keeps the codebase organized and makes it easier to maintain and extend in the future.

The utils folder: The utils folder serves as a repository for reusable functions that are utilized across different parts of the application. This includes utility functions such as formatters, validators, and helper functions that perform common tasks. By centralizing these functions in one location, we can easily access and reuse them throughout the application, ensuring code reusability and maintainability

The types folder: In the types folder, we define TypeScript types and interfaces used throughout the application. These types help ensure type safety and provide clear documentation for the shape of data objects passed around in the codebase. By centralizing type definitions in one location, we can easily reference and reuse them across different files and modules, ensuring consistency and reducing the likelihood of type-related errors.

After adding these folders, the final structure of your Next.js project should look like this:

Conclusion

In conclusion, while the folder structure outlined in this article serves as a foundation for organizing Next.js projects, it’s important to remember that there’s no one-size-fits-all solution. Every project is unique, and you may need to adapt and customize the structure to suit your specific requirements.

That being said, the structure presented here has proven to be effective in my recent Next.js applications, providing clarity, maintainability, and scalability. By organizing code into logical modules, components, and utilities, developers can streamline development workflows, improve collaboration, and enhance code quality.

Feel free to explore and experiment with this structure in your own projects, and don’t hesitate to make adjustments as needed to better align with your project’s goals and constraints.

For a closer look at the code discussed in this article, you can check out the github respository here — [https://github.com/timmy471/Nextjs-project-bootsrap].

Streamlining React Prop Passing: The Unbeatable Convenience of Prop Spreading

Ayantunji Timilehin — Thu, 11 Apr 2024 17:35:50 +0000

Introduction

In React, passing props is a core part of component-based architecture, allowing seamless communication between parent and child components. While the traditional approach involves passing props individually, a method utilizing the spread operator ({...}) has gained popularity for its elegance and efficiency. In this article, we'll delve into the advantages of this method and how it simplifies prop passing, making React development more neat and straightforward.

The Traditional Prop Passing Approach

In the standard approach, props are passed individually, specifying each prop and its value explicitly when rendering a component. For instance:

<Component prop1={value1} prop2={value2} />

This method works perfectly well and is widely used. However, as applications grow in complexity, managing multiple props can become overwhelming and may lead to code that’s less clean and more prone to errors.

The Spread Operator: A Neater Alternative

The spread operator ({...}) in JavaScript allows us to spread the properties of an object into another object. Leveraging this operator to pass props provides a cleaner, more organized way to handle multiple props. Let's take a closer look at how it simplifies prop passing:

<Component {...{ prop1: value1, prop2: value2 }} />

This approach is concise and clear, especially when passing several props. It eliminates the need to list each prop individually, making the code more readable and maintainable.

Leveraging the Spread Operator in React

Let’s demonstrate how this method simplifies prop passing in a React application:

Creating a Parent Component Consider a parent component that needs to pass multiple props to a child component:

const ParentComponent = () => {
  const componentProps = {
    prop1: 'Value 1',
    prop2: 'Value 2',
    // ... additional props
  };

  return <ChildComponent {...componentProps} />;
};

Defining the Child Component The child component receives the spread props effortlessly:

const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.prop1}</p>
      <p>{props.prop2}</p>
      {/* ... additional component logic */}
    </div>
  );
}

Advantages of Prop Spreading

Clarity and Readability: The spread operator provides a clear and concise syntax for passing multiple props, improving code readability.
** Efficiency**: It simplifies the process of passing multiple props, saving developers time and reducing the likelihood of errors.
Flexibility and Scalability: The spread operator allows for easy addition or removal of props, enhancing code flexibility and scalability.
Cleaner Code: Prop spreading reduces clutter and makes the codebase cleaner, especially when dealing with numerous props.

Conclusion

Prop spreading with the spread operator is undeniably an elegant and efficient way to pass multiple props in React. It promotes cleaner and more maintainable code, making React development a seamless experience. Embrace this approach to streamline your prop

Forem: Ayantunji Timilehin

The Biggest Mistakes Frontend Developers Make in Code Reviews

1. Focusing on Style Instead of Substance

2. Not Testing the Code Locally

3.Ignoring Performance Implications

4. Skipping Accessibility Checks

5. Giving Unhelpful Feedback

6. Not Reviewing Tests (or Not Having Any at All)

7. Not Considering Long-Term Maintainability

Final Thoughts

Fixing TypeScript Errors in React Forms

Introduction

Why I Avoided @ts-ignore

The Challenge: Identifying the Root Cause

A Hands-On Approach to Resolution

Additional Tips for Fellow Developers

Conclusion

Essential Helper Functions for Your JavaScript Projects

1. Capitalize the First Letter of a String

2. Format an Array to a Sentence

3. Format Date

4. Truncate Text

5. Check for Uppercase, Lowercase, Numbers, and Special Characters

6. Check if a Number is Even or Odd

7. Check for Non-Empty Object

Conclusion

Creating a Table Component in React with Tailwind CSS

Introduction

Prerequisites

Step 1: Setting Up Tailwind CSS

Step 2: Creating the Table Component

Explanation

Step 3: Using the Table Component

Explanation

Conclusion

Mastering the CSS Box Model: A Comprehensive Guide for Web Developers

Introduction

Let's break it down:

Conclusion

Building Web Applications: A Comprehensive Guide to Structuring Next.js Projects

Streamlining Development Workflows

Conclusion

Streamlining React Prop Passing: The Unbeatable Convenience of Prop Spreading

Introduction

The Traditional Prop Passing Approach

The Spread Operator: A Neater Alternative

Leveraging the Spread Operator in React

Advantages of Prop Spreading

Conclusion

Why I Avoided `@ts-ignore`