Programming Tutorials

React.FC in React - TypeScript

By: Faizal in React-Native Tutorials on 2023-04-07  

React.FC is a generic type alias in TypeScript used to define a function component in React. It stands for \"Function Component\" and is a shorthand for defining a function that returns JSX elements.

Using React.FC allows us to define our function component with props and their types in a more concise way. Here's an example:

import React from 'react';

interface Props {
  name: string;
}

const MyComponent: React.FC<Props> = ({ name }) => {
return <div>Hello, {name}!</div>;
};

In the example above, we define a function component called MyComponent which takes in one prop called name. The prop type is defined using an interface called Props. We use React.FC<Props> to define the function component and to specify the prop types.

The advantage of using React.FC is that it provides better type checking and makes it easier to define the prop types of the component. Additionally, it also provides better support for defaultProps and propTypes.

It's important to note that if you are not using TypeScript, you don't need to use React.FC. You can simply define your function component as follows:

const MyComponent = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

In summary, React.FC is a generic type alias in TypeScript used to define function components in React. It provides better type checking and makes it easier to define prop types.






Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in React-Native )

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native