DEV Community

My 5 cents about React Hooks

Guilherme Toti on May 26, 2020

Hey guys, how are you doing? I'll shortly tell about my experience with React Hooks. Sometimes I accept external projects to work on and I use it...

Read full post

Mike Talbot ⭐ • May 26 '20

I did a project in React a couple of years back and it was just so wordy, I didn't like it much. We came back to React as Hooks was in Beta. I don't have a single class component in the whole project (except external libraries) - I like React with Hooks, it makes sense to me and it's clean.

Great article!

Guilherme Toti • May 26 '20

IMHO, React Hooks forces developers to write "cleaner" code, using more function components instead of class components. It's awesome! Thanks for the comment!

Andrew Pagan • May 27 '20

The only thing I don't get is the following line with hooks

handleChange = (name, value) => setData(prev => ({ ...prev, [name]: value }))

I have to sometimes do this in useEffect to set a value properly. What exactly are we doing? Just using the previous value? When do you know when to do it exactly?

Guilherme Toti • May 27 '20

When you use call the setter with a function as parameter, like you did, the “prev” (the function argument) is the current state.
In your example, the “prev” is the current value of “data”.
You usually do that way instead of just setData(something) when you probably have state changes with a very short period and you want to make sure you are using the latest state value possible.
As setState is async, you may call it before other state change be completed and use old values. Using it with a parameter grants you using the latest state.

Andrew Pagan • May 27 '20

That makes sense thank you! :)

Dragos Nedelcu • May 27 '20

I agree with most.

Yet, they still give me a weird feeling, after more than a year using them.

The class decorator with all its "bads" was really explicit.
Onboarding new devs coming from another prog. languages or frameworks were so much easier.

Hooks are fantastic, yet way too 'implicit'.

Dragos

Pablo Berganza • May 27 '20

I've definitely enjoyed React much more since the introduction of Hooks!
Hey, I just have a minor nitpick! In your example of useState, you should generally avoid using an object. So instead of

const [data, setData] = useState({})

You could do something like this

const [name, setName] = useState('')
const [email, setEmail] = useState('')

Since (as you saw), setState does not merge objects by default, it just replaces the whole state.

Guilherme Toti • May 27 '20

True, it replaces the whole state, but I do prefer to have an object on state instead N variables, (depending the case), but I think this is personal preferences.
When I set states with objects, I usually update it like (e.g):

setData(data => ({ ...data, someUpdate: “ok” });

This way I get the current state value, add it to my object, and update what I want on it... keeping it immutable.

sphrases • May 27 '20 • Edited

Hi, I am interested about you guys oppinion on declaring props with function components:

const funComp = (props) => {
  //bla bla
  return <div>{props.someProp}</div>
}

const funComp = ({someProp}) => {
  //bla bla
  return <div>{someProp}</div>
}

I mainly use the first approach, but the second one is definitely "smarter". What do you think?

shivlal kumavat • May 26 '20

I'm very clear by this article in React Hooks, Thank you.

Guilherme Toti • May 27 '20

You’re welcome!