A Short Note – Functional vs Class Components in React Native

Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series.

In this note series, we will understand about the difference between Functional and Class Components in React Native.

Functional vs Class Components in React Native

So Let’s begin.

In React Native, there are two main types of components that make up an application: functional components and class components. These are structured the same as they would be in a regular React app for the web.


Class Components

Class components are JavaScript ES2015 classes that extend a base class from React called Component.

class App extends Component {
    render () {
        return (
            <Text>Hello World!</Text>
        )
    }
}

This gives the class App access to the React lifecycle methods like render as well as state/props functionality from the parent.


Functional Components

Functional components are simpler. They don’t manage their own state or have access to the lifecycle methods provided by React Native. They are literally plain old JavaScript functions, and are sometimes called stateless components.

const PageOne = () => {
    return (
        <h1>Page One</h1>
    );
}


Conclusion

In this note series, We understood about the difference between Functional and Class Components in React Native. We conclude that :

  • Class components are used as container components to handle state management and wrap child components.
  • Functional components generally are just used for display purposes – these components call functions from parent components to handle user interactions or state updates. 

Thanks for reading ! I hope you enjoyed and learned about Functional Vs Class Components Concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.

Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.

Thanks again Reading. HAPPY READING !!😊😊😊

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s