REACT HOOKS

Photo by Fili Santillán on Unsplash

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes.

We can try Hooks in a few components without rewriting any existing code. Hooks don’t contain any breaking changes. Hooks provide a more direct API to the react concepts. Hooks offer a powerful way to combine props, state, ref, etc.

You must use a hook inside a functional component.

Let’s talk about the built in hooks.

• useState()
• useEffect()
• useContext()

1. State Hook

React provides a few built-in Hooks like useState. useState function outputs an array with a value and a function, then we can give each of these a name instead of just calling it state.

Let’s try out a small example.

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
function increase(){
setCount(count+1);
}
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>Click me</button>
    </div>
  );
}
export default App;

First when our app loads up, I call state and I give it an initial value. This value gets stored inside this variable count and it gets rendered inside h1. Now when the user presses on this button and the onClick gets triggered, the increase function is activated. This increase function is going to call set count which is going to update the state of count variable and I’m setting it to equal 0. When we refresh our website, it starts out with this initial value for the count. And then I’m going to set my count to the current value of count + 1.Then when I press the plus button, it gets set to whatever it is that I set it to inside the increase function and it just increases by 1 each time.

2. Effect Hook

The Effect Hook lets you perform side effects in function components. Examples of side effects are:

• Data fetching
• Setting up a subscription
• Manually changing the DOM in React components.

The basic signature of the useEffect Hook is as below.

useEffect(() => {    //side effect });

There are two common kinds of side effects in React components. They are those that don’t require cleanup, and those require cleanup.

Cleaning up effects create resources that need to be cleaned up before the component leaves the screen.

3. Context Hook

const value = useContext(MyContext);

UseContext helps to eliminate the complexity of data transmission to the various levels in the hierarchy through props, even if it is unnecessary. Context APIs allow us to define the object context that stores some data and allows it visible in the hierarchy without passing the data as props. useContext will always re-render when the context value changes.

Additional Hooks

• useReducer()
• useCallback
• useMemo
• useRef

Conclusion

In this article, we discussed about hooks. Stay tuned for more articles!!