Finally Completed The Advanced React Hooks Course From Epic React by Kent C. Dodds

image.png

I'm finally one course away from finishing all the courses in the Epic React Standard plan.


Course Overview

advanced react hooks

Most of these are new to me. When to use them is very tricky. Sure I can write the code but will it be appropriate? Will it not be too complicated? Will it improve the performance?

Honestly, this took me a while to finish because it's hard to digest the topics in the first part. Even when I have already completed the exercises, I still need to read further to understand more.

After finishing this course, it seems like I am more confused than when I didn't start this. 😅

Learnings And Reactions

useReducer

It felt like a stranger to me - reading the exercises, I didn't know what to do or did I even understand this lesson?

But after a while and getting the hang of it, I realized I've seen this code somewhere else. Not the same lines of code but how it is. Yeah, that's right, I've already done a useReducer in my code for work. LOL

Suppose you have this code to increment count. Normally, you would write it this way, right?

function Counter({initialCount = 0, step = 1}) {
  const [count, setCount] = React.useState(initialCount)
  const increment = () => setCount(count + step)
  return <button onClick={increment}>{count}</button>
}

But what if this gets complicated? What if we're doing a decrement? Or more complicated functions like adding a status?

Sometimes, it's better off to use useReducer. When to actually use it depends on you because if it's just simple, you can use useState and don't need to bother using useReducer. If there are more objects that needs to be updated at the same time, then probably useReducer is a better solution.

Here's an example of a traditional approach.

Screenshot 2024-03-22 at 13.37.08.png

useReducer takes the reducer function as its first argument and the initialArg of type any as the 2nd argument. I used an object here that contains count.

The reducer function (in this example, countReducer) will have state and action (typically a dispatch function) as its arguments.

Don't be confused as to why it's a state and an action here when we write the useReducer differently. This is obviously different from a normal function call.

Since the useReducer returns the state and dispatch, I can now totally use them in my component.

dispatch({type: 'INCREMENT', 3})

Calling the dispatch like this will automatically update the state object's count.

The only thing that is important to remember for developers here is not to have a typo in the type.

Again, it may not be good to change everything to useReducer if useState is already okay. If you're still confused, here's what Kent C. Dodds posted in his post.

When it's just an independent element of state you're managing: useState
When one element of your state relies on the value of another element of your state in order to update: useReducer

note: code is from the exercises

useCallback

const aCallback = React.useCallback(theCallbackFunction, [])

Good for memoization and not rerending components but still it's better to proceed with caution. If it's simple, maybe there's no need for a useCallback. We don't want to stress the performance of our app just because we find useCallback cool.

useContext

Usually it helps when you're tired of passing around props to different components but I still don't think it's worth the hassle to code it like this.

Screenshot 2024-03-22 at 14.12.25.png

You start by creating a context.

const CountContext = React.createContext();

And when you want to use it, you can call using useContext.

const ctx = React.useContext(CountContext)

Make the CountProvider and wrap the components with it.

Even when it solves the issue of passing around props, it's not really the best solution out there so I suggest not to use this.

useLayoutEffect

I've been dealing with a problem at work related to adjusting the height of a div and this seems to be the solution. I've been using useEffect and I just realized useEffect isn't meant to be used for DOM changes because this is called last. It's better to use useLayoutEffect.

hook-flow.png

Check out this hook flow from this source to understand better.

useDebugValue

Useful when you're on a development mode. It helps with debugging but useDebugValue only works in custom hooks. You can see it when using the React Developer Tools extension which seems to be a must have for React developers but I confess I haven't been using it.

function useCount({label, value}) {
  React.useDebugValue({label, value})
  // ...code for your custom hook here
}

Conclusion

These topics are really advanced. While it's not all the time that you need to write code with them, it's still important to know they exist and who knows, they may come in handy in the future.

Now that I have finished this course and learned a few great lessons, I guess let's see if it improves how I code from now on. Thinking about using useState or useReducer, or when to use useCallback are already making me dizzy. Still need to be careful not to downgrade the performance of the app or make the code complicated.

Anyhow, that's it for me.


Thanks for reading!
See you around! じゃあ、またね!


All photos are screenshots from my code unless stated otherwise.



0
0
0.000
9 comments
avatar

Will this make your Reaction time faster?

Congrats 🎉

0
0
0.000
avatar

untitled.gif

depende din kasi e. only useful on devices that are able to support it.

0
0
0.000
avatar

I think all devices support it naman, d ba?

0
0
0.000
avatar

ung updated? oo. e pano ung mga lumang server/devices? may cases pa nga na ung old code di pwede ilagay sa bago kasi depreciated and no longer in use ung syntax.

0
0
0.000
avatar

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support. 
 

0
0
0.000
avatar

Congratulations @wittythedev! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

You received more than 800 upvotes.
Your next target is to reach 900 upvotes.
You made more than 10 comments.
Your next target is to reach 50 comments.
You got more than 10 replies.
Your next target is to reach 50 replies.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

0
0
0.000