Understanding Functional Component for React Native Development

Introduction

This post is related to the functional component in React Native. We all know with React, we can make components using either classes or functions. Originally, class components were the only components that could have state. But since the introduction of React’s Hooks API, you can add state and more to function components.

Hooks were introduced in React Native 0.58 and because Hooks are the future-facing way to write React components it is a best practice to start writing your React Native code as a functional component.

Why Function Component?

1. No Class means no ‘this’

As a javascript developer, we all know how tough it is to handle ‘this’. It’s always advantageous if you don’t have to use ‘this’ when writing your Javascript code.

Another bonus is, not having to use ‘this’ means that we also don’t have to use bind, which is an even more confusing concept. So we can say that with functional components we will have a cleaner, clearer code.

2. Fewer lines

Functional components transpile down to less code than class components, which means functional components will create smaller bundles.

3. Easier to read and understand

Functional components are very easy to read and understand which is also a positive point as easy to understand means easy to test and debug.

Functional v/s Class Components

1. Syntax

The most obvious difference is the syntax. A functional component looks like a plain JavaScript function.

A class component requires you to extend from React.Component and create a render function that returns a React element. This requires more code also.

The class component in React Native

ClassComponent

The functional component in React Native

FunctionComponent1    FunctionComponent2

2. State

While managing the state in classes we use setState and this.state to set and get the state respectively but in the functional component we have useState hook after the update of React 16.8.

State in Class Component

State in functional Component

3. Lifecycle Methods/Hooks

Another most important difference in Class and functional component is the lifecycle methods or you can say Lifecycle Hooks. We all know how important is the Lifecycle methods while developing any React Native application. LifeCycle methods give us the power to control the data and application flow on different activities. We are very much familiar with the class component Lifecycle methods but in case of functional components we have to manage all this with the help of useEffect hook.

Example of Lifecycle Methods for Class Component

ClassLifeCycle

Example of useEffect Hook for Functional Component

FunctionalLifeCycle

These are the main differences that I can think of. There are also many other small differences which you will get to know once you start using functional components. If you have doubts related to the useSate or useEffect then please wait and keep visiting AboutReact as I am going to post some content soon to help you understand the hooks.

Conclusion

Previously Class components were used as container components to handle state management and wrap child components and Functional components were generally used for display purposes as they did not have state management support but after the release of Hooks we can say functional components are the future of React Native development.

Class components are not deprecating but due to the many performance improvements in the functional component React Native team also suggested using the functional component over class components. Hooks are like a blessing for us, It makes coding super easy. It will take some time for you to understand the hooks but trust me once you understand hook you will fall in love with functional components and hooks.

If you have noticed I have started using the functional components in all my examples now and will start to update the old one soon. If you have any suggestions or want to share anything you can comment below.

I hope you like this post. 🙂

1 thought on “Understanding Functional Component for React Native Development”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.