top of page
  • Writer's pictureMukesh Jangid

The Power of Hooks: Enhancing React Functional Components with Lifecycle Methods



Lifecycle methods are really important to perform any specific action at a particular point in the components' lifecycle. Earlier there were lots of limitations in using states in functional components but now react hooks have revolutionized the way we write functional components in React.


Now we can use states and also can manage the side effects in any functional component with the use of useState and useEffect hooks without having to use class component


Even hooks allow us to manage life cycle methods in functional components and I must say this has completely changed the way we implement any component in React


useEffect Hook

useEffect is a react hook that performs the side effect in a component

useEffect is a powerful hook allowing us to perform certain side effects in a React component, one of which is an API call implementation.


Usage



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

const Posts = () => {
    const [posts, setPosts] = useState([]);

    // Fetch posts from an API
    useEffect(() => {
        fetch('https://api.mukesh-jangid.com/posts')
        .then(response => response.json())
        .then(data => setPosts(data));
    }, []);

    const renderPostItem = useCallback(({ item }) => {
        return <Text>{item?.title}</Text>
    },[]);

    return (
        <FlatList
          data={posts}
          renderItem={renderPostItem}
          keyExtractor={item => item?.id?.toString()}
         />
    );
};

Here the empty array [] in useEffect dependency ensues that effect only runs once when the component first mounts.


Lifecycle Methods with useEffect Hook


useEffect hook is so powerful that it can be used to mimic the Lifecycle methods in functional components like the one that we've already in the above example, perform side effects only when the component mounts, and also perform an action when a specific prop gets changed


useEffect in action to implement Lifecycle methods in functional component


componentDidMount()


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

const Profile = () => {

    useEffect(() => {
        // Mimic componentDidMount behaviour here
    }, []);

    return (
        <View />
    );
};
    

Here useEffect has a blank array dependency that means function callback is only called once when the component first mounts


componentDidUpdate()


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

const Profile = ({ username }) => {

    useEffect(() => {
        // Mimic componentDidUpdate behaviour here
    }, [username]);

    return (
        <View />
    );
};
    

Here useEffect has a dependency as a username which means the callback function is called every time when username value gets changed


componentWillUnmount()


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

const Activity = () => {

    useEffect(() => {
        return () => {
          // Mimic componentWillUnmount behaviour here
        }
    }, []);

    return (
        <View />
    );
};
    

Cleanup function in useEffect can be used to remove listeners or perform any specific action before the component unmount and even before the execution of the next scheduled effect


Conclusion


The addition of the hooks specially useState and useEffect has increased the popularity of writing functional components instead of class components, using useEffect and other hooks, we can create powerful functional components that can mimic the behaviour of class components with Lifecycle methods.


Happy Coding!


32 views

Recent Posts

See All

Comments


bottom of page