Javascript - Are useMemo and useEffect callback good places to run code only at the birth and death of a React component?

hassanfaraji
December 13, 2023
408 views
3 votes
3 Answers

I want to hook into two lifecycle events of a React component. When it’s born, and when it dies. When it’s born, I want to load some data from the URL or local storage, and that data should not change no matter how many times the internal state of the component changes.

At the end of the component’s life, when it’s disposed of, I want to store some data in the local storage.

I thought of using useMemo() for the birth event. And I considered using a callback in an empty useEffect for the death event.

Have I chosen them correctly?

P.S. I want this that I’m creating a general list component. I want to load the initial filters from the URL or the local storage once. And when things change, I want to update the URL. And when the list is closed I want to store the latest filtering state in the local storage.

Answers

- tao
- December 13, 2023 at 2:29 pm
- 0 votes
0
You’re looking for useEffect with an empty array of dependencies ([]).

The callback function (which is the first argument of useEffect) is run only once, after the component was created if the dependency array (the second argument) is empty. If the dependency array is not empty, the function is re-run whenever any of the dependencies changes value.

If the callback returns a function, that function (a.k.a "the cleanup callback" – because it’s typically used to clean up bindings) will be run just before the component is destroyed:
```
React.useEffect(() => {
  // this code runs just after the component was created

  return () => {
    // this code runs just before the component is destroyed
  }
}, [])
```
React documentation for useEffect().
Login or Signup to reply.

- nikocxvedadze
- December 13, 2023 at 2:34 pm
- 0 votes
0
I would prefer to use useEffect hook for both operation, i think you are meaning component mount and component unmount

for component mount you can use useEffect like that
```
useEffect(()=> {
   // this code will only run once when component mounts
}, [])
```
for component unmount you can still use useEffect but now you need to return callback function from useEffect which would only run on unmount when component dies
```
useEffect(()=> {
 
  return () => {
    // code written here only run when component dies (on component unmount) 
  }
}, [])
```
useMemo also is good way to optimise your to run only once when component loads and you can write like that
```
 const myLocalStorageValue = useMemo(() => localStorage.getItem("myvalue"),[])
```
if you pass an empty array to useMemo hook it would only run once, but remember the value of myLocalStorageValue variable would be what you return from arrow function passed in useMemo
Login or Signup to reply.

- AsmaSormeily
- December 13, 2023 at 3:52 pm
- 0 votes
0
As the first answer explains, what you are looking for is the useEffect hook. You do not need to use the useMemo, as it does not align with the lifecycle event of a component’s birth (mount).

Also, useMemo hook is suitable for improving the performance of your app. For instance, if you have a large array and need filtering or transformation, useMemo helps to store the result of the computations if your list hasn’t changed, as the React documentation explains in here.

About the rest of your question, If you’re planning to update the URL when there’s a change in the component’s state, you’ll likely use another useEffect that depends on the state variables you’re tracking. This useEffect will run whenever the specified state variables change.

Login or Signup to reply.