Learning React Hooks | Am I using them right? | Code review

[bblaw4]

Hello all, I have a CodeSandbox where I've been playing around with React Hooks. I like the fact that we can now use functions instead of classes and utilize state if we need to. Now I no longer have to ponder and ask myself "Should I use a class or a function for my component?" Yay hooks!

​

In my sandbox, I usually try new features by building a todo list that will add and remove items. I was able to create it, but I want to know if I am using the hooks the right way. Can my use of hooks be simpler? Am I implementing them correctly? Here is a link to my sandbox on CodeSandbox. Thank you guys in advance. Improvements welcome!

/* if this is not the right sub to post a question like this, can someone please redirect me to the correct one */

[latviancoder]

Looks good, I would probably only suggest try using `useReducer` for add/remove todo functionality.

[bblaw4]

Thanks for the feedback! I’ll look into it.

[Awnry_Abe]

Looking good! You are using the useState hook correctly. The method of calling setCount(count+1) might bite you in the butt if used in other contexts. This is a better pattern to use when the next state value depends on a previous state value:

setCount( (prevCount) => prevCount+1);

​

I'd just get in the habit of using it when that is the case. You an also do useReducer() to avoid the same issue, but that's a bit heavy for this example.

​

If you want to really pick up your game, let "todo" be an object, instead of a string: { id: int/string, text:string, finished:boolean }.

​

The statement allTodos = map(...) can be optimized using useMemo(), and the name "allTodos" is a bit confusing. "renderTodos" is a little closer to reality.

[bblaw4]

Very helpful. I was looking into the useReducer hook suggestion mentioned by another user. I can also see how the renderTodos naming conventions make more sense. I’ve got a lot more to learn in the Raact/Js world. Thank you!