Hooks in the Latest ReactJS Version

Originally published at onix-systems.com.

React 16.8, the latest version of the popular JavaScript library, includes an implementation of React Hooks. They are functions that let ‘hook into’ React state and lifecycle features for stateless components. Dan Abramov introduced the new functionality at React Conf in October 2018. Following positive user feedback and some adjustments, Hooks became available in a stable release on February 6, 2018.

This short article explains why those functions in the new ReactJS version are so important and how they facilitate writing React applications.

Why React 16.8 Is Great

  • More concise code. Hooks let developers reduce that part of a component which is responsible for the logic and view. They are similar to syntactic sugar: less code is written, but the functionality level remains the same.
  • Increased component reusability. Hooks make components cleaner. The less complex logic and dependencies they have, the easier they are to reuse and test.

React 16.8 doesn’t contain any breaking changes. To enforce best practices with Hooks, React engineers recommend enabling a new lint rule eslint-plugin-react-hooks rather than using Create React App. They will, however, include the plugin into Create React App by default soon.

NB! Hooks will work with React packages that are 16.8.0 or higher.

Hooks solve at least three problems that React developers have been tackling for years:

1. Reused stateful logic.

Hooks help to prevent the wrapper hell. They enable developers to extract stateful logic from a component to test it independently and reuse. It can be done without changing your component hierarchy. Hooks also allow integrating stateful logic into stateless components, removing the limitations that stateless components used to impose.

Simpler and more straightforward logic requires fewer splits into smaller components. Consequently, their reusability increases.

2. Large-sized components.

export default class ReactLargeSized extends React.Component {

componentDidMount() {

const {actionId} = this.props;

this.sunscribeToAction(actionId);

this.fetchActionData(actionId);

this.startTimers();

}

componentWillUnmount() {

const {actionId} = this.props;

this.unsunscribeFromAction(actionId);

this.cancelPendingRequests();

this.stopTimers();

}

componentDidUpdate() {

}

render () { return …; };

}

With the stateful logic all over the place, such components are difficult to break into smaller ones and to test. Hooks allow splitting one component into smaller functions based on relations between the pieces, e.g., adding and removing a subscription or fetching data.

3. Understanding of the classes in React 16.

Hooks provide a solution. See how one of the original built-in Hooks in React 16.8 — useState function — works:

Stateful example:

import React from ‘react’;

export default class Hello extends React.Component {

constructor(props) {

super(props);

this.state = {

name: ‘John’

}

this.handleNameChange = this.handleNameChange().bind(this);

}

handleNameChange(e) {

this.setState({name: e.target.value});

}

render () { return …; };

}

The sample above shows the following process:

  • the developer creates a state with initial data;
  • creates a handler function for change event;
  • displays a view with data and handler function in render method.

Here is the same process with Hooks:

import React, { useState } from ‘react’;

export default function Hello(props) {

const [name, setName] = useState(‘John’);

function handleNameChange(e) {

setName(e.target.value);

}

render () { return …; };

}

The code includes:

1. useState — the Hook allows to use state in functional components. It returns an array where the first element is a value from state, and the second is a recording function in state.

2. setName — function which writes the data in state (equivalent setState({name: e.target.value})).

The use of state for a functional component requires importing useState first. Then, with useState, the developer initializes the name variable and a function which can update setName data in it. Call to setName will change the value of the name variable and drive it to re-render the displayed elements.

As a result, the code is more concise, the functional component needs no re-writing, and the state can be reused.

Selected React Hooks

useContext

import {useContext} from ‘react’;

import {someContext} from ‘./Context’;

…(further in the functional component)

const someVariable = useContext(someContext);

useEffect

useEffect(() => {

// some logic that was in componentDidMount and componentDidUpdate

const handleResize = () => setWidth(window.innerWidth);

window.addEventListener(‘resize’, handleResize);

return () => {

// some logic that was in componentWillUnmount

window.removeEventListener(‘resize’, handleResize);

}

})

useEffect is consistent by default, i.e. is performed every time the component renders and replaces componentDidMount and componentDidUpdate, while the function in return for useEffect replaces the logic from componentWillUnmount.

Custom Hooks

Users can create own Hooks as JS functions which call other Hooks. Custom Hooks let extract the logic from a component to facilitate testing. Developers can reuse stateful logic between components without adding new ones to their tree.

Hooks are rather a convention than a feature. The name of a custom Hook should always start with ‘use,’ such as:

function useItemInStock(itemID) {

const [isInStock, setInStock] = useState(null);

// some custom logic

return isInStock;

}

The operation logic of some React Hooks can be separated from a component. Within it, call to a custom Hook looks like a standard call to useDocumentTitle(name). However, the developer is still able to work with the component lifecycle, state, and context.

Hooks allow developers to use React without classes, but Facebook doesn’t plan to get rid of them. Instead, they mean Hooks to cover all existing use cases for classes.

To Recap

Built-in Hooks in the latest React version work side-by-side with existing code and with classes, can be adopted gradually, and don’t require the developers to learn complex functional or reactive programming techniques. Custom Hooks can cover use cases like form handling, animation, declarative subscriptions, timers, and more.

The new convention in React 16.8 promotes flexibility and speed of development. Properly harnessed Hooks allow the developers to speed up and optimize the app loading. Contact us if you’re interested in such development!

FOLLOW US:

Onix-Systems provides IT services in website, mobile app and emerging technologies software development. Check our blog -> https://onix-systems.com/blog

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store