React hooks
This fourth video in the React basics series explains the useEffect hook and demos it live by fetching random user data from a public API.
Fetching data from an external API and getting a React component to actually display it sounds simple, but it requires understanding one specific hook: useEffect. This fourth entry in the React basics series focuses entirely on that hook, explaining what it does and demonstrating it live with a working example.
What React hooks are
Hooks are functions that let components hook into React's state and lifecycle features from within function components. They were introduced in React 16 to solve problems like reusing stateful logic across components without restructuring everything into class components. Hooks like useState, useEffect, and useContext are described as fundamental to building reactive, efficient React applications, and this video zeroes in on useEffect specifically.
What useEffect is for
useEffect allows a function component to perform side effects, operations that reach outside the component itself. That includes things like fetching data, setting up a subscription, or manually changing the DOM. In older, class-based React, this kind of behavior was split across three separate lifecycle methods: componentDidMount, componentDidUpdate, and componentWillUnmount. useEffect replaces all three, bundling their capabilities into a single, unified API and simplifying what used to be a more fragmented lifecycle model.
When useEffect matters most
The hook becomes especially useful when fetching data from an external API. A common pattern is a user interface change, like clicking an "Add" button, triggering an HTTP call, after which the DOM needs to update to reflect the result. useEffect is what makes that update happen cleanly, giving components a structured way to react to changes and update accordingly.
Building the demo
The demo builds a small app that fetches and displays user data from a public API. Inside app.js, both useState and useEffect are imported. useState creates a userData state variable, initialized to null since no data has been fetched yet. The fetch itself targets randomuser.me's API, and the JSON response is stored into that state variable once retrieved. Passing an empty array as the second argument to useEffect tells React that the effect doesn't depend on any values, props, or state, so it only needs to run once, similar to componentDidMount in the older class-based model.
Debugging the response shape
Getting the display right takes some trial and error in the video. The fetched data comes back as an object containing a results array, and pulling the name and email requires drilling into results[0] rather than treating the top-level object as the user directly. Logging the response to the console repeatedly is what surfaces this structure, and once the correct path, results[0].name and results[0].email, is used, the component displays the fetched user's information correctly. Each time the page refreshes, useEffect runs again, fetching and displaying a new random user.
Cleanup and wrapping up
Beyond just running effects, useEffect also supports cleaning them up. If an effect sets up a subscription or a timer, useEffect can clear that out when the component unmounts, which prevents memory leaks. With the demo working end to end, fetching, storing, and displaying data from an external API, the video closes out having covered how to perform side effects in React function components using useEffect.
Key takeaways
- useEffect lets function components perform side effects like data fetching, subscriptions, or manual DOM updates.
- It replaces componentDidMount, componentDidUpdate, and componentWillUnmount from class components in a single unified API.
- Passing an empty array as the second argument runs the effect only once, similar to componentDidMount.
- API responses often need careful inspection, logging the data to the console is the fastest way to find the correct property path.
- useEffect also supports cleanup logic, useful for clearing subscriptions or timers to prevent memory leaks.
Who this is for
This video is aimed at developers working through the React basics series who have already covered component fundamentals and are ready to learn how components interact with the outside world through side effects.
Full transcript(auto-generated, with timestamps)
[0:00]Uh hello everyone and welcome to this uh react tutorial uh video uh on react hooks uh with a special focus on understanding the use effect hook this is part of uh the react Basics series uh so let's focus and learn about react Hooks and uh especially uh the use effect hook and this video so uh react hooks uh uh kind of uh revolutionized uh the way that we can write components you know uh and they offer a more direct uh uh API to the uh react Concepts which we know so so basically to understand what really react hooks are so they are functions which let us hook onto react
[0:52]State and life cycle features uh from the function components so they were introduced in react uh 16 version yeah to solve a wide range of problems like the ReUse of stateful logic complex components and uh more such things to to uh hooks like UST State uh use effect and use context are fundamental in creating reactive and efficient react applications so in Focus uh let's look into the use effect hook so you use effect is a very powerful Tool uh which kind of uh allows us to perform the side effects for the functional components so we'll be thinking like okay what what are side effects so if um so you can think of
[1:43]Operations I mean that reach outside the comp outside of the component to fetch data or uh to set up a subscription or manually change the Dom so essentially use effect replaces component dead Mount uh comp ented update and component will unmount from the class components bundling their capabilities in a unified API so so this uh kind of goes into the react life cycle processes so kind of simplifies the whole uh uh some of the components uh of the life cycle like component de Mount component update and component will unmount and with using a simple hook use effect hook uh we have made it much simpler uh and into a unified API and uh
[2:35]Use effect is especially useful when you know when you're trying to fetch data from an external API so usually the applications that we use like uh cred applications which you know fetch data from the servers when any uh change has been made on the user interface like for example user clicks on uh uh add so for example there's a Blog uh application and we click on ADD and uh there uh of course we make uh a particular uh uh HTTP call so depending on the request that we're making we'll make a respective uh uh HP call but after the call is made we uh we need to
[3:19]Update the Dom so use effect comes into play Inter force uh through its powerful uh way of you know interacting with the user interface and the uh the components so let's see how to uh how the use effect works and uh let's create a simple application so which kind of fetches the and displays the user data from a public API so we'll understand use effect through that uh and yeah let's go go ahead with that so I've created a demo project here uh for showing the use effect demo I'll remove all of this okay so first um let's start working on it so like I mentioned use effect it
[4:19]Kind of allows us to perform the side effects in the component and uh it tells the react that the component needs to do something after entering and let's see this an action by fetching user data from an API so in in this app.js file uh I've cleared up uh most of the return code and let's uh start writing some useful stuff import react we also be using US state hook which is used to store uh data and that's also a very powerful hook so I will be explaining that in detail later another uh video probably so once we've imported use State and use effect what we can do is
[5:13]Uh we'll have to fetch uh so what we'll be doing is we'll be fetching some data of data of some user so I've have uh explored a particular uh website which is random user. me so through that uh uh we can get the API through its API you know we can get uh the Json uh form uh the data in the form of of Json and which is useful for us to render it uh for our uh starter projects so let's create let's fetch some data tag should be random user data cool and here we will be displaying all the data so after displaying uh after
[6:08]Fetching the data we need to be able to store that the data in some uh somewhere we'll use state which the user data comma set user data use state it'll be null for now because there's no such data yet and if you can see it's not u a string an array or a number it's an object so it's a n object right now because we do not have anything here so now we'll use use effect to fetch the data so what we can do is we'll use fetch it's in built so what we going to do is fetch on this particular website user me/
[7:20]API dot then the response that we get we'll be changing to the Json format and then down we'll be setting it but for that let's first console Lo the data to see if what we're getting and let's set the user data cool so what we can do now is uh here we using the use effect to fetch the data and we're also using use State hook to manage the fetch data so inside our component we'll Define a state we already defined the state user data to store the user data that be fetched uh
[8:32]So when we uh pass an empty array uh so here also we need to pass an empty array here because that's one of the characteristics of uh the use effect hook so so it's part it's like a second argument so when we pass the Mt as a second argument in use effect this tells the react that you know our effect doesn't depend on any any values or props or the state so it will never need to you know run so this is similar to the component de mount in the class components so class components uh were used in the older version of react but currently it's all functional
[9:18]Components so with a feted user data we let's start to display that first okay so what we can do is so all the user data that we get if it is true if the user data that we got is true I mean we got the user data what we can do here is let's create a div simple name I will first try to fet the name of the users data dot name uh don't just assume that I know what uh uh the user data is and that's why I know uh I mean I
[10:29]I'm magically knowing all of this but I already know like the structure of the data so I'm just writing it um I'll just show you how the data is structured uh in just a moment don't worry about this uh error it's because there's no closing tag so what we can do is let's have an email user data and um let's close this okay right now that we have this uh our application can now Fetch and display the data let's see let's do the
[11:45]Console okay okay okay so okay we' got an array of results okay so it's an object of course it's an object uh and we got the name here okay is name okay we got the name um what we can do I'll just remove this all right um yeah try to make this
[12:58]Simple okay okay we at least got the results and um results. name results. name name do first dot there seems to be an issue here so I think um
[14:09]Okay so there there is a issue here because uh the format of the Json here okay so we got the results right so why is this happening let's see the console always that's the reason I used console is because it always helps us to see uh what's wrong so let me see let me check it's always good that uh know we are debuging the code using
[15:27]Console so name so this is email right okay right got it I think this was the reason because results was something that we had to uh uh results of zero let's do one everything is inside the first cool I think uh so every time every time we update uh or we reload the or refresh the page we want to get a new uh random user and all of this is uh happening it's because of use effect so use effect uh I just a user data once it's mounted and it updates the state with that data triggering a reender to display the username every time so but use effect is
[16:37]Not just for running the effects but it's also for cleaning them up suppose uh we set up a subscription or a timer we want to clear that out when the component unmounts uh to prevent memory leaks uh uh we can use use effect for that and uh yeah so with our user data is fetched and we we're able to display it and um yeah and we also utilized um an external API to fetch the data so so we've learned how to perform the side effects of uh in the react in our react functional components and uh we also learned a little bit of uh about uh
[17:21]The use effect hook so let's see you in the next video thank you
More from React
20:49React Hook
29:30Building a Weather App with React & Axios | React Basics Series Part 3"
18:33Basics of React - Part II
34:41Basics of React by Humanitarians AI Fellow Raghu Teja | Powered by Bear Brown & Company
2:08Bridging the Pixel Gap in Browser Automation.
2:23