React Hooks – New Stuff For Cool Kids
Have you noticed this huge buzz about React Hooks in last few days/weeks? If you are as interested in it as we are and you haven’t hesitated and have watched the Dan Abramovs’ talk (the first one ever on React Conf), you won’t find anything new in the following article. On the other hand, if you’ve never heard about it or you haven’t got a chance to explore it more, this article may speak to you.
Why were these “hooks” even created?
I’ve been writing react apps for about 5 years now and same as most of you I’ve came across many different issues. Facebook company has finally spotted these problems as well and hoping that it would motivate developers to use this new feature, they’ve listed and described them.
Stateful logic share across the components
As it is commonly known, React itself doesn’t offer any possibility to create shared logical component part (a connection to store, for example…) so we cheat this using HOC (high order component) or render props pattern. These accesses allow us to get exactly what we need, but there are side effects like rough learning curve, more complicated code unification in team, typical “wrapper hell” inside React Devtools, where all components are wrapped in any way possible. I’m not saying that it’s a problem that cannot be solved but still, React could offer an easier solution.
Using React Hook you can write parts of the logical components that can be reused and which are not making any changes in the component hierarchy across the application. Moreover they are easy to test.
Huge, complex, incomprehensible components
To be able to work with component states you need to create multi-line stateful components using lifecycle methods (componentDidMount, componentWillUnmount) typical for data fetching, UI element alternation. Most oftenly developers don’t want to divide certain problem into smaller units because of this shared state/logic.
Not only are these complex components difficult to test, they also lead to wiping numerous small bugs because of its lack of clarity. This typically happens inside multi-member teams where such a complex code calls for a multiple opinions on how to solve this problem.
As we explain further in this article, React hooks, and Effect Hook especially, solve this issue effectively using partition of the complex issue into small function units with an access to local state.
Class component understanding
Personally, I don’t recognize this as a big issue, but the React creators point out some problems in understanding how Classes work, event handlers binding or how the magic word this works in javascript.
This also comes in hand with a diversity of views on when to use functions, when to use Class components etc.
And only just React Hooks offer a possibility to use React features without a need to also use Class components. Despite that, they’ve states that there is no plan to eliminate Class components, so keep calm and don’t rewrite your codes.
First steps with React Hooks
As it was suggested earlier, Hooks are a new feature straight from the React workshop which allows us to work with the components state without a need to use Class components. Momentarily they are part of React v16.7.9-alpha. And what more? They are compatible vice versa, you can try React Hooks in a part of your application without a need to rewrite the current code.
State Hook
In the upcoming example I demonstrate the usage of “useState” (State Hook) in a simple application, which is set to dynamically change the weather after clicking a button.
In this specific example the useState function and its argument that describes the initial state are crucial. We can use the function to connect local state to primitive components and we can also use it for various states how many times we want. It provides an actual state (in this case for example weather) and also a function that allows changing the state (in this case setWeather). The Access is pretty similar to well-known this.state except the setWeather function doesn’t substitute the previous state with a new state.
Effect Hook
Imagine a model situation in which we want to download data from API or to change manually DOM from a component before the component renders. We would probably go for componentDidMount or componentDidUpdate method. How to deal with this gracefully we’ll explain in the following example.
Effect Hook and especially useEffect function allows us to create so called side effects (in this case data fetching from Yahoo Weather API) and it also offers a possibility to clean the mess after ourselves (if we have caused some mess, of course :-)). The returning function which is defined in Hook is activated if the component is ready to clean (it’s slightly similar to lifecycle method componentWillUnmount).
It is possible to use useEffect more times same as State Hook as you can see in our example case.
Other Hooks
Other commonly known Hooks are useContext allowing an access to React app context, useReducer serving as an alternative to useState except it accepts state and action, or useRef allowing an access to specific elements.
To sum up
React Hooks are experimental features that offer interfaces for usage and dynamic transformation of the local state in simple components that don’t require classes. They are also interfaces for evocation of so called “side effects” inside the certain component before its final render.
It will certainly take a while before the Hooks will become a full-fledged part of our applications. That is why I would like to point out the word experimental. By all means stay all crazy about this feature same as we are, but don’t rush it and don’t rewrite your apps straight away, because you never know what’s coming tomorrow. :-)
Sources:
