React & TypeScript: What is React.FC and Why should i use it?

#react #typescript #tutorial

React.FC is a type that stands for "Function Component" in React. It is a generic type that allows you to specify the props that a function component will accept.

Using React.FC can be helpful for a number of reasons:

It provides type safety for the props that a component expects to receive. This can help catch bugs early on and make your code easier to understand.
It makes it easier to refactor your component's props. For example, if you want to rename a prop, the TypeScript compiler will catch any places where that prop is used and help you update them.
It makes it easier to see the expected shape of a component's props just by looking at its type definition.

Here's an example of how you might use React.FC:

import React from 'react';

interface Props {
  name: string;
  age: number;
  onClick: () => void;
}

const MyComponent: React.FC<Props> = ({ name, age, onClick }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <button onClick={onClick}>Click me</button>
    </div>
  );
};

In this example, MyComponent is a function component that accepts props of type Props, which includes a name string, an age number, and an onClick function. The component is defined using the React.FC type, which allows TypeScript to check that the component is being used correctly and provides type information for the component's props.

You can also use React.FC when you want to specify a defaultProps object for your function component. For example:

import React from 'react';

interface Props {
  name: string;
  age: number;
  onClick: () => void;
}

const MyComponent: React.FC<Props> = ({ name, age, onClick }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <button onClick={onClick}>Click me</button>
    </div>
  );
};

MyComponent.defaultProps = {
  name: 'John',
  age: 25,
  onClick: () => {},
};

In this example, the MyComponent function component has a defaultProps object that specifies default values for the name, age, and onClick props. These default values will be used if the component is rendered without the corresponding props being passed in.

What is defaultProps?
In a React function component, the defaultProps object is a way to specify default values for props that may be omitted when the component is used. This can be useful if you want to provide a fallback value for a prop in case it is not supplied by the component's parent.

Using the defaultProps object can be helpful for a number of reasons:

It allows you to specify a fallback value for a prop in case it is not provided. This can help prevent undefined values from being passed to your component, which can cause errors.
It can make it easier to understand the expected shape of a component's props just by looking at the defaultProps object.
It can make it easier to test your component by allowing you to focus on testing the behavior of the component with a specific set of props, rather than having to supply all possible props every time.

Conclusion:
You should use React.FC when you want to define a function component in your React application and you want to specify the type of props that the component expects to receive.

I hope this helps! Let me know if you have any questions.