How to use functional components for React Native development

In this post, we will learn about How to use functional components for React Native development, as we all know we can develop React Native apps using two types either classes or functions. In the class component, we can able to use state using this.state.name but in 2019 with the release of React 16.8, React Hooks finally becomes available to develop applications in React Native and now we can use state in functional components using hooks. and it’s a good practice to write react native code using the functional components.

Why Functional component?

1. The functional component makes it easy to read, write & debug code for developers.
2. No need to use ‘this’ word, also don’t need to use bind to call methods.
3. It allows you to use React Hooks which makes state management very easy.
4. It reduces code and makes smaller bundle sizes.

   

Now let’s understand with basic syntax difference between classes & functional components.

1. Common syntax for class component

here’s the syntax for the class component. it will display text on the screen

import React from 'react';
import {Text, View} from 'react-native';
 
class App extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     someData: 'This is class example'
   }
 }
 
 render() {
   return (
     <View>
        <Text>{this.state.someData}</Text>
     </View>
   )
 }
}
 
export default App;

Now, let’s understand the same example with a functional component using react hooks

import React, {useState, useRef} from 'react';
import {Text, View} from 'react-native';
 
function App() {
  const [getString, setString] = useState('This is function example');
 
   return (
     <View>
        <Text>{getString}</Text>
     </View>
   )

}
 
export default App;

Now you can see in the above functional example. the number of lines is reduced in code. this is an advantage of the functional component. also, you can use const as follows.

import React, {useState, useRef} from 'react';
import {Text, View} from 'react-native';
 
const App=()=> {
  const [getString, setString] = useState('This is function example');
 
   return (
     <View>
        <Text>{getString}</Text>
     </View>
   )
}
 
export default App;

2. How to use state in functional component

first, will see how to use state in the class component

import React from 'react';
import {Text, View} from 'react-native';
 
class App extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     someData: 'This is class example'
   }
 }

componentDidMount(){
 this.setState({someData: 'This is updated state'});  //<--- this is how you can update state in class component
}
 
 render() {
   return (
     <View>
        <Text>{this.state.someData}</Text>
     </View>
   )
 }
}
 
export default App;

Now, let’s understand the same example with functional component

import React, {useState, useRef, useEffect} from 'react';
import {Text, View} from 'react-native';
 
function App() {
  const [getString, setString] = useState('This is function example');

 useEffect(()=>{
   setString("This is update functional String");  //<--- update state in functional component
 })
 
   return (
     <View>
        <Text>{getString}</Text>
     </View>
   )

}
 
export default App;

3. Life cycle for the functional component

React native life cycle for the functional component is very easy & simple. We just need to useEffect hooks to work the same as componentDidMount, componentDidUpdate, and componentWillUnmount methods. useEffect accepts two parameters, first one is callback with runs after render/return data on the screen. second in the optional dependency array which accepts a parameter. after passing the parameter in the array we simply tell the effect only run when that parameter changes. if you want to understand React Native class life cycle the check out this post

This is How we can use functional components for React Native development

Thank you 🙂