Hooks in React

Hooks are the new feature of the react. They let you use the state and other features of React without creating a class. They are mainly used to handle state and other side effects in react functional components. Side effects are essentially anything that affects something outside of the scope of the current function which is being executed. For example :

• A developer clicks “Register application.”
• We dispatch a REGISTER_APPLICATION action.
• We make a backend service call to register the application. (side effect!)
• We fetch the response data returned from the backend call and dispatch a REGISTER_APPLICATION_SUCCESS event with this response data. (side effect!)
• We navigate to this newly registered application. (side effect!)

The reason to use the hooks is that if you need to access state or change it in your functional component in your application then you need to change the functional component to a class component. But now with this new feature, you can change your state within your functional component as well.

Rules to be followed:

• Hooks can only be defined on the top level of the functional component. Do not define them inside any loop, condition, or nested function.
• Only call hooks from the react functional component, not in any regular javascript function.

State Hook:

import React, { useState } from 'react';
function Example() {
// Declaring a new state variable
const [count, setCount] = useState(0);
//count is our state and setCount is our function which is going to be used to change the state value.
// useState(0) is used to initialize state
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

Effect Hook:

The Effect hook (useEffect) adds the ability to apply side effects from a function component. It serves the same as the componentDidMount, componentDidUpdate, and componentWillUnmount in class components. useEffect runs after the first render and after every update. We can also add our function for adding and removing the subscription and which should be the arrow function.
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

Example with subscribe and unsubscribe event:
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}

In this example, the ChatAPI event will be unsubscribed when the component unmounts.