A Brief Introduction of Hooks in React

What is Hooks?

Hooks are special functions that add state and lifecycle methods features to your functional components.

Function components with React Hooks prevent unnecessary component refactorings. Earlier, we used to have React class components for local state management and lifecycle methods. As a result, many side-effects were introduced viz. listeners or data fetching in React class components.

Basic Type of Hooks

There are 10 in-built hooks that was shipped with React 16.8 but the basic commonly used hooks are below:

* useState()

* useEffect()

* useContext()

* useReducer()

Also Read: React Native Tutorial Using Redux

useState()

Using the useState() hook React developers can update, handle and manipulate state inside functional components. They can do all this without needing to convert it to a class component.

For example:-

function App() {
  const [age, setAge] = useState(19);
  const handleClick = () => setAge(age + 1)

  return 
      <View> 
          I am {age} Years Old 
        <View> 
        <button onPress={handleClick}>Increase my age! </button>
      </View>
   </View>
}
 

useEffect()

The useEffect() hook receives an initial state as an argument and then returns, by making use of array destructuring in JavaScript, the two variables in the array can be named what. The first variable is the actual state, while the second variable is a function that is meant for updating the state by providing a new state.

For example:

import React, {useState, useEffect} from 'react';
function App() {
 
    const [name, setName] = useState({firstName: 'name', surname: 'surname'});
    const [title, setTitle] = useState('BIO');
   
   
    useEffect(() => {
      setName({FirstName: 'Virat', surname: 'Kohali'})
    }, [])
    
    return(
        <View>
            <Text>Title: {title}</Text>
            <Text>Name: {name.firstName}</Text>
            <Text>Surname: {name.surname}</Text>
        </View>
    );
};
export default App
 

Also Read: Social Login in React Native App

Pros and Cons of Hooks:-

Pros:-

1. Better option than the common design patterns.

2. Easy testing and maintenance of functional components.

3. To avoid redundant logic, hooks can create re-usable, isolated components.

4. Easy to use, write, and co-locate.

Cons:-

1. Have to respect its rules, without a linter plugin, it is difficult to know which rule has been broken.

2. Need a considerable time practicing to use properly (Exp: useEffect).

3. Be aware of the wrong use (Exp: useCallback, useMemo).

Conclusion

Here is a recap of what we have learned. Hooks came to solve widespread problems faced by the react developers. They encourage the use of functional components to benefit from its simplicity and efficiency.

Just like every other thing, React Hooks also has some cons that we have to be aware of and respect the recommendations of the React team to avoid them.

We, at Oodles Technologies, provide full-scale SaaS app development services to build scalable, responsive, and quality-driven web and mobile applications. Contact us for technical assistance or drop us a line at [email protected] for more detail.