Refactor to React Hooks

[TimVanMourik]

Hi @rwieruch!

I loved this tutorial and to get a better understanding of what's going on I started to play with it. And soon I started refactoring the code to using React hooks. So here's the entire repo hookified, every last React.Component gone.

Full disclosure, there's one small catch: I got into a problem with updating a regular form with hooks. For some reason there's a page refresh after clicking the submit button that I wasn't able to solve directly. The way in which I worked around it was by using Formik, a React component to simplify <form />s. This completly resolves the problem and simplifies the form code, but does introduce a dependency to the package.json and might distract from the purpose of the tutorial. If you feel that's a change you don't like, I am still more than happy to hear a suggestion on how to solve it without, because I didn't manage.

Cheers,

Tim

PS. Would you be interested in a follow-up PR to refactor thens to async awaits?

[TimVanMourik]

Ah, part of the hooks oddities yet remain!

• go to home, where you see a message
• click 'more' to increase the limit
• delete a message This triggers a full refresh, so the component is reloaded and the limit is reset to 5.

I do not know the cause though. I'd love to hear ideas...

[rwieruch]

Hi @rwieruch!

Hey Tim! 👋

I loved this tutorial and to get a better understanding of what's going on I started to play with it. And soon I started refactoring the code to using React hooks. So here's the entire repo hookified, every last React.Component gone.

That's awesome! There were various folks before you asking for a hooks version. Since there wasn't one, I asked them to try to build one themselves just for the sake of practicing it 🙂

Full disclosure, there's one small catch: I got into a problem with updating a regular form with hooks. For some reason there's a page refresh after clicking the submit button that I wasn't able to solve directly.

Did you try to use event.preventDefault() on your form submit? https://www.robinwieruch.de/react-preventdefault

The way in which I worked around it was by using Formik, a React component to simplify <form />s. This completly resolves the problem and simplifies the form code, but does introduce a dependency to the package.json and might distract from the purpose of the tutorial. If you feel that's a change you don't like, I am still more than happy to hear a suggestion on how to solve it without, because I didn't manage.

I would leave the source code as it is for now, but I would love to keep your PR for people asking me about a hooks version 👍 Next year I have time to refactor the code base and book myself, so in order to keep it synchronized, I would want to wait until then. However, I have a good feeling that lots of people will check your implementation.

Cheers,

Tim

Thanks for your efforts Tim! Really appreciated 🙂 Best wishes, Robin

PS. Would you be interested in a follow-up PR to refactor thens to async awaits?

If you want to do it yourself, then please go forward 👍

[TimVanMourik]

Ahh, event.preventDefault(), of course! I hadn't removed it but it seems that if you put a debugger before the preventDefault, effectively the default is executed nonetheless... or something like that. Anyway, that's a very helpful pointer, especially your blog post!

I still had the code without formik, so it's no trouble at all. I updated this PR to revert al formik changes and it's now a vanilla hooks implementation again!

Good luck with the book!

[TimVanMourik]

I was still wondering... to what extent can the with... functions be rewritten as use... functions. But maybe that's gonna be a chapter in the book 😀