Hooks in React Native

In this blog, We are going to learn about the react native hooks, Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

useState :

This new function “useState” is the first hook that we are going to learn about.

As we already know that React is supporting component functions they suggest their developers use component functions rather than components classes.

We can not use the state as we use it in-class component. So that’s why we need to use state in component function by using the useState function.

Let’s do some code to understand the useState function.

import React, { useState } from 'react';
import {
  Button,
  Text,
  View,
} from 'react-native';

const ComponentFunctoion = (props) => {
  const [count,setCount] = useState(0)
  return (
    <View style={{alignItems:"center",flexDirection:'row',justifyContent:'space-between',margin:12}}>
            <Button title="Add Count" onPress={()=>{setCount(count+1)}}/>
      <Text>
        {count}
      </Text>
      <Button title="Minus Count" onPress={()=>{setCount(count-1)}}/>
    </View>
  );
};

import React, { useState } from 'react';

import {

Button,

Text,

View,

} from 'react-native';

const ComponentFunctoion = (props) => {

const [count,setCount] = useState(0)

return (

<Button title="Add Count" onPress={()=>{setCount(count+1)}}/>

<Text>

{count}

</Text>

<Button title="Minus Count" onPress={()=>{setCount(count-1)}}/>

</View>

);

};

In thi code as you can see we have imported a function called “useSate” from “react”. We will use that function to create a hook.

In the below lines you can see we define a const in the first parameter we define the name of the state variable “count” and the second parameter is a function name that by using this function we can change or update the state value. After this you can see that we assign useState value to the const variable.

useState function takes a parameter that is the default value for the state.

const [count, setCount] = useState(0)

1	const [count, setCount] = useState(0)

Now you can use the state directly by calling its name as you can see we show {count} and when you want to update the state just call the setCount function in its parameter set your value.

In my case I use two-button first is add count button that we increase the count +1 and then i show a text that will show us the count value then minus button that is to decrease the count -1.

Here we are done with the useSate method.

useEffect :

In our hooks useEffect function is like componentDidMount, componentDidUpdate and componentWillUnmount.

If you’re familiar with React class lifecycle methods, you can think of useEffect.

import React, { useEffect, useState } from 'react';
import type {Node} from 'react';
import {
Button,
SafeAreaView,
Text,
ToastAndroid,
View,
} from 'react-native';


const ComponentFunctoion = (props) => {
const [count,setCount] = useState(0)

useEffect(()=>{
ToastAndroid.show("Use Effect function called",ToastAndroid.SHORT);
})

return (
<View style={{alignItems:"center",flexDirection:'row',justifyContent:'space-between',margin:12}}>
<Button title="Add Count" onPress={()=>{setCount(count+1)}}/>
<Text>
{count}
</Text>
<Button title="Minus Count" onPress={()=>{setCount(count-1)}}/>
</View>
);
};

const App: () => Node = () => {

return (
<SafeAreaView style={{justifyContent:'center',height:"100%"}}>
<ComponentFunctoion/>
</SafeAreaView>
);
};

export default App;

import React, { useEffect, useState } from 'react';

import type {Node} from 'react';

import {

Button,

SafeAreaView,

Text,

ToastAndroid,

View,

} from 'react-native';

const ComponentFunctoion = (props) => {

const [count,setCount] = useState(0)

useEffect(()=>{

ToastAndroid.show("Use Effect function called",ToastAndroid.SHORT);

})

return (

<Button title="Add Count" onPress={()=>{setCount(count+1)}}/>

<Text>

{count}

</Text>

<Button title="Minus Count" onPress={()=>{setCount(count-1)}}/>

</View>

);

};

const App: () => Node = () => {

return (

</SafeAreaView>

);

};

export default App;

Here is my App.js class useEffect is just a function that is react like react life cycle methods.

Here is our final output.

Hope this blog will help you to understand the Hooks for react native.

Reference –> https://reactjs.org/docs/hooks-effect.html,

https://reactjs.org/docs/hooks-state.html

Anand Kashyap 31 August 2021

. . .

Hooks in React Native