Keynotes for useEffect (React)

If you are utilizing React’s hook system, then you are using the useEffect life cycle method in place of the usual componentDidMount method for class-based components. In this method, there’s almost always code related to the HTTP requests you make. This article’s purpose is to show and explain a couple of neat keynotes about useEffect to spice up your application.

useEffect’s second argument:

Like every example I have displayed in previous articles, it will be in the form of a simple search component:

Notice at the very end there is a second argument of[term] . Here are the rules of the second argument of useEffect:

• The second argument can only be one of three things: blank, an empty array, or an array with elements inside.
• If the second argument is blank then useEffect will only run on the initial render of the component.
• If the second argument is an empty array then useEffect will run at the initial render and every single re-render
• If the second argument is an array filled with elements, then useEffect will run at the initial render and every re-render IF the data inside the array changes.

How does this relate to a search function?

Well if we take a look at our second argument, it is an array with an element inside called term . Somewhere else in this imaginary application there is an onChange event keeping track of said term (every character change).

What the second argument allows us to do is make requests without requiring an onSubmit event. This is a neat way to add some flair to your applications. Each key press will automatically do a search for you.

2. useEffect’s return statement:

The return for useEffect is very unique. It only has one rule:

• You can only return an arrow function.

When the component is initially rendered, the return isn’t invoked but the reference to the function is saved. When the component re-renders that is when the return is invoked before anything else even runs. Use console.log to try it out yourself.

How can this be used?

For the search component in the examples, a search is performed every keypress which will make tons of requests that you don’t necessarily want to make. To combat this, you can do a simple setTimeOut to delay when the search happens after pressing a key. But, the problem with that is that the timer will not reset every keypress and will instead start at the first keypress and end at the exact time from that press. So if you are typing “Electronic Cars” it might do a search in middle, only searching for “Electro” due to the timer still running.

How do we fix this?

Well, you could increase the duration of the timer or type faster. But it would be more practical to clear it after every re-render. That is what the return statement in the example above is for. After every keypress, the timer will reset making it so you can type long words/sentences like “How do I use useEffect?” in the input field without the timer invoking the search in the middle. Give it a try!

More content at plainenglish.io