Making Sense of React Hooks

Dan Abramov on November 02, 2018

Originally published on Medium This week, Sophie Alpert and I presented the “Hooks” proposal at React Conf, followed by a deep dive from Ryan Fl... [Read Full]
markdown guide
 

If the React community embraces the Hooks proposal, it will reduce the number of concepts you need to juggle when writing React applications.

As a fairly recent React user, I think this is probably the biggest selling point for me. Have a good feeling that Hooks will make things easier to use and understand, as opposed to adding more complexity.

 

This will only ease the pain for new developers that start new projects.

If you start with React and have to work with existing projects, depending on its age, you'll have to wrestle all concepts (Mixins, Higher Oder Components, Render Props).

 

Yes. But at least with existing codebases, you can sort of pattern match and learn by a bit of trial and error. Too many competing concepts is probably harder when you're green field and the task at hand is still super abstract.

 
 

At the risk of being offtopic, I want to say a big thank you to you, Dan, for your time and effort of posting here :]

 

This feels like redux ideas being shoehorned into React. The code itself looks so ugly to me and overly ceremonious. React lost something BIG today and prompted me to look into VueJS as the boring straightforward choice.

 

What code examples are you comparing? I don’t see any similarity to Redux in this article but maybe I’m missing something. If anything code using Hooks looks less ceremonious to me than either of the alternatives (like render props or HOCs).

Please elaborate with examples?

 

That’s an interesting perspective. What parts of it look ugly specifically? This is also optional for now as you can continue working with react without using hooks.

 

I just wanted to say thanks for all the hard work you do (along with many others such as Sophie) to keep the community updated re React. I follow ya'll on Twitter and don't think I've seen any two people so passionate about keeping people informed and in the loop :)

I just wanted to say that randomly.

 
 

Hi, Dan! Thank you for all you and the team are doing for the community!

If you have a couple of spare moments, I had a couple of ideas, maybe you can find then anyhow interesting.

1) You are saying that functions are stateless but in ES6 we have a function* or async function. They can be used as the event generators I suppose. Something like

const eventGenerator = ...;
while (true) {
   await eventGenerator();
   render();
   eventGenerator = ...;
}

Have you considered that option?

2) Just a fun thing: Logo of the city where I was born is an atom - why not to do the next React conf there? ;)

3) This is the example from the React Documentation

useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

I think it is pretty confusing, there is no reason why this particular example cannot be rewritten as

document.title = `You clicked ${count} times`;
 

UPD. Actually found the answer to my third question in the React API Reference.

 

Hey Dan, thanks so much for this. It's been very interesting reading and watching the articles on the subject be posted over the past week or so.

As you mentioned:

Note: Hooks are an experimental proposal to React.

Do you think that people actually heed that warning? How do you suggest folks find the right balance between jumping right in to learn and experiment vs. proceeding with sufficient caution?

 

Thank you for this article, very insightful! The topic of React Hooks was also mentioned at the most recent React Conference in Berlin.
You can read a recap of it (also including Hooks) here: selleo.com/blog/react-day-berlin-2...

 

I am super excited by Hooks. I don't know if I will miss the explicitness of React but I doubt it. A little magical but some magic is alright I suppose. ;)

 

Hey please i have some issues with react hooks and storing state and update state from localstorage

 

My 2c on the hooks cause:
github.com/salvoravida/react-class...

Use Custom Hooks with React Class Components. Support React >= 15.3.2

 

yes, my first reaction was rather visceral, i cried tears of joy. This is going to be great.

code of conduct - report abuse