paint-brush
I Created an Alternative to React's useEffect Hookby@andrewcovenant
5,620 reads
5,620 reads

I Created an Alternative to React's useEffect Hook

by Andrei Făgădău
Andrei Făgădău HackerNoon profile picture

Andrei Făgădău

@andrewcovenant

👋 I am a Senior React.js & Node.js...

December 28th, 2021
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

The useOnUnmount() hook is a functional React alternative to ComponentWillUnmount that allows us to mutate values between renders so that it can be used outside the component. UseOnUpdate() is another useful hook for when we want to trigger an action when the component changes, and not when the state changes. The useEffect() will clean up the previous state before applying the next one. The hook can be found here: useOnUpdate(https://www.hackernoon.com/images/qKpeaoFMpkfgP9RP0ujjUyy9fa42-FB13bitbit-bit-p90vb)

Company Mentioned

Mention Thumbnail
Different
featured image - I Created an Alternative to React's useEffect Hook
1x
Read by Dr. One voice-avatar

Listen to this story

Andrei Făgădău HackerNoon profile picture
Andrei Făgădău

Andrei Făgădău

@andrewcovenant

👋 I am a Senior React.js & Node.js Developer / Contractor / Freelancer with 𝟲+ 𝘆𝗲𝗮𝗿𝘀 𝗼𝗳 𝗲𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲.

Learn More
LEARN MORE ABOUT @ANDREWCOVENANT'S
EXPERTISE AND PLACE ON THE INTERNET.


After spending almost three months working on a multistep form for one of my clients, I found that the existing react hooks are insufficient for creating a personalized form.


Just to give you a little bit of insight, my client wanted a seven-step form that included bullets on the left side for each form. The bullets had to be decoupled from the forms and needed a different color based on the state of the form.


The client also wanted that actions like coloring the bullets to be triggered only after the user leaves each form. When being unmounted, the form would send its state to another component.


Knowing that we were in need to create some custom solutions, we ended up implementing the following two hooks that saved us a lot of time. The first one is:

useOnUnmount()

The useOnUnmount() hook is a functional React alternative to the ComponentWillUnmount lifecycle method that allows us to mutate values between renders so that it can be used outside the component. This hook saved us a lot of effort than just trying to change the business logic or installing other packages that might have helped us.


But why not just use the useEffect() return callback functionality?


If we go back to basics, the return function inside the useEffect() is a cleanup function, therefore we can't check a condition or set a new value for the state.


The hook looks like this:


useOnUnmount()

useOnUnmount()


useOnUnmount used in component

useOnUnmount used in component


Pay close attention to what value the console outputs inside the useEffect cleanup function and the useOnUnmount() hook.


How does it work?

useOnUnmount() uses a useRef() that allows the state to mutate between renders. The useEffect() will clean up the previous state before applying the next one.

useOnUpdate()

This is another useful hook for when we want to trigger an action when the component state changes, and not when the component mounts. You can consider it the ComponentWIllUpdate alternative for functional React.


This one - calls the callback each time the state changes, triggering an action.


Why is this useful?

Well, imagine needing to trigger a modal, change the text on a button, etc., or any action you need - instead of keeping the logic inside the component, you can reuse it by having a custom hook.


The hook can be found here:


useOnUpdate

useOnUpdate


useOnUpdate

useOnUpdate


Hope this article will help you while developing forms in React and will ease your path.


Let me know in the comments what do you think. Best of luck!


L O A D I N G
. . . comments & more!

About Author

Andrei Făgădău HackerNoon profile picture
Andrei Făgădău@andrewcovenant
👋 I am a Senior React.js & Node.js Developer / Contractor / Freelancer with 𝟲+ 𝘆𝗲𝗮𝗿𝘀 𝗼𝗳 𝗲𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲.

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Hashnode
X REMOVE AD