weekly insights into the trends in web development

DevTrends #39

React Hooks


November 22, 2018



React Hooks

We can honestly say that React is current gold standard of UI libraries (or web frameworks, when thinking of it together with follow-up tools). But though React as a development tool has great and powerful functionality, there are still areas which can be a subject to improvements. For example, reusability. Currently there are 2 main concepts of how to write and share reusable logic in React: Higher Order Components and Render Props. But both of them require writing pretty lot of boilerplate code, adding even more overhead to existing “wrapper hell” as we (and event React team itself) call common situation where there are just too many levels of components. And most of them are just wrappers, providers, consumers and other entities which sole purpose is to share a state between children.

And here React Hooks come in. React Hooks is the new feature of React 16.7, which is currently in alpha and in consideration status but has already big positive feedback from developers. So, what exactly is Hook? In terms of React hook is a special function that lets you to “hook into” state or lifecycle methods of a function component without writing a class. One of the greatest benefits React Hooks provide is that now you can reuse stateful logic among components without changing their hierarchy. You just import a hook, which is a plain function itself, and use it in different places of code where it applies.

Let’s see how it work on a first hook React provided — the State Hook. For that, let’s install React 16.7 and create a small boilerplate. So, React Hooks are great new way to share common logic without writing excessive code and rewriting your components. It opens a whole world of possibilities to hook into React application logic and modify it as we wish with minimal overhead.


Current modern standard of communication between client and server is HTTP/2. Most applications and websites still use HTTP version 1 (or 1.1 to be precise) and feel comfortable with it. But progress does not stand still, and recently new specification of HTTP number 3 has been standardized. It’s more precise name is HTTP-over-QUIC, and QUIC is itself a new protocol which abbreviation stands for Quick UDP Internet Connections. This protocol was first started as an effort by Google and then was standardized as HTTP/3 by Internet Engineering Task Force.

QUIC is more robust and faster protocol than TCP. Actually QUIC is based on UDP, which itself light and quick but much less reliable than TCP. But QUIC will handle packet losses itself, so with it we should see big speed improvements over the old standard. Also, if a client blocks UDP, QUIC can fall back to TCP and act as usual.

HTTP/3 proposal was published on October 24, which means it will take some time to finalize the specification and much more time to adopt it by actual implementators.

Previous episodes

Episode #37

DevTrends #37

October 19, 2018

JavaScript Visualizer. create-react-app v2

weekly insights into the trends in web development

Sponsored by