Is it an anti-pattern to use a class based react component in a functional component?

user_801973 0
Viewed 94

I am want to use a certain component in react native but all the third party components were written as class based components. Is it an anti-pattern to use a class based react component in a functional component? For example:

import * as React from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';

import ClassComponent from 'SomeOldClassBasedCompont';

export default function TabOneScreen() {
  return (
    <View>
        <ClassComponent />
     </View>
      
  );
}
react-native reactjs
1 Answers

The class based/function base components are a React Component at all.

Let's take an example: Assume you have 2 different components, FirstComponent & SecondComponent and you want to use them inside an App component, what do you do?

export default function App() {

  const firstTitle = "just an example";
  const secondTitle = "another example";

  return (
    <View>
        <FirstComponent title={firstTitle}/>
        <SecondComponent  title={secondTitle}/>
     </View>
  );
}

Is it matter for App component to render a functional or class-based component? is there any difference between rendering FirstComponnet or SecondComponent? what about passing props?

Since the component returns a valid JSX form, it will be rendered.

So, what are the differences between functional and class-based components?

The differences are in syntax, the ways to manage the life cycles, using hooks, constructors, and the special value of this. in other words, the differences are in the component definition and not related or affected on the parent or child components.

Summary

components are components, no matter is written in a class-based or functional-based structure.

user_57379500
Related