useState & useEffect

useState

useState is considered to be the most basic of all the hooks provided by React. It is also the one you are most likely to use alongside useEffect. Yet over the last couple of months, I have seen this hook being misused a lot. This has mostly nothing to do with the hook itself, but because state management is never easy. One of the reasons we can use functional components as our main component is because they can now contain their own state using Hooks such as useState. Because of this, it is possible to get rid of class-based components altogether.

Despite this advantage given by Hooks, it’s still possible to cultivate bad practices while using useState in our functional components. We are still not safe from potential pitfalls we may introduce while constructing our components in function form.

The useState hook gives you the ability to make an account of the state in a function component. To use the useState hook, we must import the hook from the react library.

import React, { useState } from "react";

useState takes in the original state and returns two values, the current state you currently have and a function to update that state.

const [count, setCount] = useState(0)

The first value is count and the second is the function to update state setCount. useState(0) is being used to set our initial state this being 0.

In this example, I'm creating a simple counter to increment by 1 so in order to do this, we must update state using the setCount method.

function handleCount() {
setCount(count + 1)
}

Here we have a function called handle count the takes are setCount method and passing in the current state and adding one. This is the official method of setting a state value in an immutable manner. We use the second element, which is a function to set the state.

<li key={vessle.id}>
<Link to={`/vessles/${vessle.id}`}>{vessle.vessleName}</Link>
<button onClick={handleCount}>{count}</button>
</li>

Once we have the ability to update state we created a button using the onClick event with our handleCount function passed through and the button itself representing the current count.

The useState hook can be used to keep track of strings, numbers, booleans, arrays, objects, and any combination of these.

All documentation on the useState hook can be found on the https://reactjs.org/docs/hooks-state.html website.

useEffect

Understanding how useEffect works is one of the most important tools for being an efficient React developer. UseEffect uses side effects on your application such as fetching data, reading from local storage, registering and deregistering event listeners, and many more. In the example below is a fetch request using the useEffect hook.

useEffect(() => {
  fetch("/vessles") 
  .then((resp) => resp.json())
  .then(vessles => setVessles(vessles))
}, [])

I'm using the useEffect hook for an asynchronous task such as a fetch request to get data from an API of vessels. Since useEffect runs on every render the empty dependency array and the end of the hook simply means that the hook will only trigger once when the component is first rendered. So for example, for useEffect it means the callback will run once at the beginning of the lifecycle of the component and never again. This is a very common practice when you want to do something at the beginning of the lifecycle of a component, for example to do some data fetching. Some effects require cleanup to reduce memory leaks. Timeouts, subscriptions, event listeners, and other effects that are no longer needed should be disposed of.