RNative-Hooks

What is useEffect() Hook in React Native ?

August 09, 2024

useEffect is a React Hook that allows you to perform side effects in functional components. It's widely used in both React and React Native to handle tasks such as data fetching, subscriptions, timers, or manual DOM manipulations.

Here's an overview of how to use useEffect in React Native:

useEffect(() => {
  // Effect code here
  return () => {
    // Cleanup code here (optional)
  };
}, [dependencies]);

Parameters

  1. Effect function: This is the function where you perform your side effects.
  2. Cleanup function: This is optional and is used to clean up after the effect (e.g., unsubscribe or cancel a network request).
  3. Dependencies array: Determines when the effect should re-run.
    • An empty array [] runs the effect only once after the component mounts.
    • Omitting the array runs the effect after every render.
    • Including dependencies [dependency1, dependency2] runs the effect when one of the dependencies changes.

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

const App = () => {

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

  useEffect(() => {
    console.log( count);
  }, [count]);

  function abc(){
    setCount(count+1)
  }

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title='submit' onPress={abc} />
    </View>
  );
};

export default App;