What’s New in React 16.8

React is a library by Facebook that allows you to create super performant user interfaces. React allows you to disintegrate a user interface into components, a functional unit of an interface. By composing components together, you can create UIs that scale well and deliver performance.

The React 16.8

React 16.0 was announced on On 26th September 2017,

React 16.8, released on 6th February 2019

Hooks is an opt-in feature and is backward compatible. And while it offers a replacement to class components, their inclusion does not mean that class components are going away. The React team has no plans to do away with class components. As the name implies, Hooks allows your function component to hook into React features such as state and lifecycle methods. This opens up your components to a number of possibilities. For instance, you can upgrade your static function component to include local state in about 2 lines of code, without the need to structurally refactor the component in any form.The Hooks API consists of two fundamental and primary hooks which are explained below. In addition to these fundamental hooks, there are a number of auxiliary hooks which can be used for advanced behaviour. Let’s examine these, one by one.

• useState 
• useEffect 
• useReducer 

useState : The useState hook is the most fundamental hook that simply aims to bring state management to an otherwise stateless function component. Many components written initially without local state in mind, benefit from easy adoption of state without refactoring needed.

The code below is a simple counter which started off as the following basic component:

Before Using Hooks

const App = ({count}) => (<h1>{count}</h1>);

To turn this into a stateful counter, we need two more ingredients:

1. A local state variable called “Count”
2. Buttons to invoke functions that increment and decrement the value of the “Count” variable.

Let’s say we have buttons in place, to bring the state variable to life, we can use the useState() hook. So, our simple <App> component changes as follows:

const App = () => {
const [count, setCount] = useState(0);
 return (
   <>
   <h1>{count}</h1>
   <button onClick?={() => setCount(count + 1)}>Increment</button>
   <button onClick?={() => setCount(count - 1)}>Decrement</button>
   </>
 );
}

useEffect : The useEffect hook enables a function component to implement effects such as fetching data from an API, which are usually achieved using the componentDidMount() and the componentDidUpdate() methods in class components. Once again, it is important to iterate that hooks are opt-in which is what makes them flexible and useful.

Here’s the syntax for the useEffect() hook:

const App = () => {
 const [joke, setJoke] = useState("Please wait...");
useEffect(() => {
   axios("https://icanhazdadjoke.com", {
     headers: {
       "Accept": "application/json",
       "User-Agent": "Zeolearn"
     }
   }).then(res => setJoke(res.data.joke));
 },[]);
  return (<div className="joke">{joke}</div>);
}

useReducer : If you’ve ever used Redux, then the useReducer() hook may feel a bit familiar. Usually, the useState() hook is sufficient for updating the state. But when elaborate behaviour is sought, useReducer can be used to declare a function that returns state after updates. The reducer function receives state and action. Actions can be used to trigger custom behaviour that updates state in the reducer.

Thereafter, buttons or other UI elements may be used to “dispatch” actions which will trigger the reducer.

This hook can be used as follows:

const [state, dispatch] = useReducer(reducer, {count: 0});

Here’s a summary of other available hooks in the v16.8 release:

useCallback : The useCallback hook enables you to implement a memoization enriched callback function which enables an equality check between a function and inputs, to check if renders should be performed. This is equivalent in concept to the shouldComponentUpdate function that the PureComponent allows you to implement.

useMemo : This hook enables you to pass in a function and an array of input values. The function will only be recomputed if the input values change. This, like the useCallback, enables you to implement equality check based optimizations and prevent unwanted renders.

useRef : This hook is useful for accessing refs and initializing them to a given value.

useImperativeHandle : This hook enables you to control the object that is exposed to a parent component when using a ref. By using this hook, you can devise custom behaviour that would be available to the parent using the .current property.

useLayoutEffect : This hook is similar to the useEffect hook but it is invoked synchronously after the DOM has been mutated and updated. This allows you to read elements from the DOM directly. As a result, this can block updates and hence should ideally be avoided.

useDebugValue : This hook is used to display a custom label for hooks in the React DevTools.