Phase 2 - useEffect
I chose to focus on my blog for this section on useEffect, as I felt it was a hook that could be particularly useful for future work in React and therefore wanted to reinforce some of the general principles behind using this hook beyond the use in my Phase 2 project.
First I’d like to discuss some of what I discovered while researching effect more deeply in React documents:
Effect is complex - in order to fully capitalize on the benefits of this hook, it takes time and effort to understand how it works.
useEffect is very important in that it is used to invoke side effects within functional components - i.e., when this function is initiated, something else happens too without demanding that the user take action. This makes useEffect a very directly beneficial tool for maximizing user experience.
My use of hook and the example I will provide in this blog doesn’t even come close to getting beneath the surface. I hope this information inspires you to learn more on your own, and just gives a glimpse as to the potential of useEffect!
First, let’s review some of the knowledge that was important to understand as a prerequisite to using useEffect:
Fetching data; if you need a quick refresher on this topic, please visit my blog for phase 1. This is critically important for useEffect.
Using event listeners; if you’re feeling uncertain about the use of event listeners, please take time to research those further, as that knowledge will help tremendously to understand the useEffect hook.
What are the benefits of useEffect - why should be use it if it’s so complicated - you might be asking yourself. The answers are many, but I noticed immediately even with my limited use of the hook that this helps avoid duplicated code, and that’s always a good thing. From my research it’s also clear that useEffect helps support one of the principles behind react, which is separation of responsibilities in our code structure.
I will now go through my personal example of useEffect, and as we move through the steps to get it to work, I will add in some important concept reminders.
This is an image example of the application that I created. As you can see, on page load, there are a bunch of cute kitty dating profiles that appear:
Kittycatdatingapp
Now, this is where useEffect first comes in to play. When visiting a dating website, who wants to have to click an additional button to have all the profiles load? No one! To help facilitate this and to also fetch the data needed, I have useEffect fetching my cat profile data, and useState helping to keep that data appropriately updated. All of this is existing in my top component, so that all child components can access this information through the passage of props.
Here is a snip of what my App component looks like with useEffect in place:
Now let’s dive a bit deeper - how does useEffect help my child components? Further down in the app component, I have passed several props down to the child components, some supported by Effect:
Here you can see that the setCats state function is being passed down in several placed (CatPage, MatchPage, and CreateProfile). This is all so that those child components can reap the benefits of useEffect. Let’s take CreateProfile as an example and go a little bit further in our understanding.
There are a few things happening here, but let’s focus on the fetch request within the handleSubmit function. As you can see, this function is assigning a variable called “itemData” (aka, a new cat dating profile) and it’s using fetch to add that data/profile to our JSON file, i.e. not just having that profile temporarily appear until the page refreshes, but actually permanently adding it so that on page load, our useEffect hook will automatically fetch it!
But there is something really critical that needs to be coded in order for this to actually work, and that’s the event listener. There are a few different ways to go about this, but the moral of the story is that handleSubmit needs to be called WHEN something happens - in this case, a form is submitted. Here is how this looks in my example:
Here we have used “onSubmit” to call the function “handleSubmit” whenever the form is submitted. Every line of the form has its own state that is set within this component using “onChange”, which feeds “handSubmit” the details needed to push the new cat profile to “setCat”. Pretty cool, huh?
This concludes my simple example of using Effect hook, but there is a lot more to learn! In conclusion, I want to share an instagram quote that helped add perspective and clarify in very simple terms the most critical concepts of useEffect:
