Forem: adams mercy

useState or useReducer – which to choose for your application

adams mercy — Tue, 04 Apr 2023 03:20:44 +0000

useReducer helps us manage state in a complex application. What exactly is useReducer? Is it an alternative to useState? useState and useReducer are both used to handle state logic. It is thereby necessary to understand when to use these hooks. useReducer is not replacing useState in any way but it would be more efficient to use useReducer in some complex applications.

We are going to explore these hooks in detail showing the best hook to use in any given application and how we can convert one of these hooks to use the other. Let’s get started.

The commonly used state hook – useState, is a react hook that lets you add a state variable to your component. It is usually written like this:

const [state, setState] = useState(initialState)

useState takes in an initialState which can be a string, boolean, number, array, object or function. It returns two values namely:

state – This is the current state
setState – This is a function that updates the state.

A simple example looks like this:

const [country, setCountry] = useState('Nigeria');
const handleClick = () => {
    setCountry('South Africa');
}

The above code snippet is a simple example of the useState hook and how we can use it to update the state. If the handleClick function is passed to a button, on clicking the button, the application re-renders to show the update – “South Africa” for the country state variable.

What exactly is useReducer?

useReducer is a React hook that lets you add a reducer to your component. So, what is a reducer? A reducer is a function that allows us to specify all the state update logic in a single function.

useReducer takes in two major parameters and an optional third parameter. It returns two values – state and dispatch. The state is the current state and the dispatch is a function that lets you update the state.

const [state, dispatch] = useReducer(reducer, initialState, initFunc?)

Same simple example with useReducer:

const reducer = (state, action) => {
    switch (action.type) {
        case 'change_country': {
            return {
                country: action.newCountry
            }
        }
        // other cases are written here
        default: {
            return state
        }
    }
}

const [state, dispatch] = useReducer(reducer, {country: 'Nigeria'});

const handleClick = () => {
dispatch({
    type: 'change_country',
    newCountry: 'South Africa'
})
}

An explanation of the above sample code snippet – we invoked our useReducer which accepts a reducer that contains the logic for updating the state and an initial state of { country: ‘Nigeria’ }. We are calling the dispatch function in the click handler; passing in the type of action we want to perform with the value of the next state.

Dispatch and Reducer Explained

Dispatch Function: The dispatch function returned by useReducer lets you update the state to a different value and trigger a re-render. You need to pass the action as the only argument to the dispatch function. An action is usually an object with a type property identifying it and, optionally, other properties with additional information.

dispatch({
    type: ‘change_country’,
    // other properties
})

A reducer function is declared like the below code snippet. It accepts state, which is the current state and action which updates the state and returns the next state.

function reducer(state, action) {
    // state updates are made here
}

We have successfully updated a state using both useState and useReducer. So, of what use is one hook over the other? We will cover this next in this article.

Comparing useState and useReducer

useReducer is similar to useState. useReducer enables us to move our state update logic into a single function which is more efficient for larger applications.
useState is simple and easy to set up for smaller applications but when the application gets complex, it becomes difficult to read with many state logic in event handlers. useReducer proves to be efficient for this use case as it helps organize our state logic in one place.
useReducer is easier to debug in a complex application as you can easily find the action that is not dispatched, but with useState, you would have to look through a lengthy code to identify the error.
Examining the above code sample, using useState resulted in fewer lines of code. While this is good for smaller applications when the application gets larger, the lines of code also increase. Using useReducer to separate the logic in a function is a better approach for larger applications.

If your application is handling multiple state logic in event handlers, then you should use useReducer else useState is fine.

How to migrate from useState to useReducer.

We are going to explore an example that uses both useState and useReducer. You will, therefore, see how we can migrate from one to the other. Here is a simple application that gets the user’s first_name and last_name with a button to add the names to the existing name list and a button to reset the name list.

Steps to follow:

Move from setting state to dispatching actions.
Write a reducer function.
Use the reducer from your component.

This contains the code sample of our application. To see the implementation of our state update logic using useState, comment out the FormUsingReducer component in App.js and uncomment the Form component in App.js and vice-versa for useReducer.

Conclusion

We have explored both useState and useReducer to update state. We also looked at a real live example, when it is preferable to use these hooks and lastly a quick comparison of both. A lot of references are from the React documentation. Check it out here.

Understanding the concepts we use and exploring new concepts is critical for growth as developers. I hope you have learned something and you are excited about applying what you have learnt in your next project.

Thanks for reading.

useEffect and useLayoutEffect: The Differences and Use Cases

adams mercy — Tue, 14 Mar 2023 10:33:32 +0000

A lot of developers are conversant with useEffect and how to use it but when asked about useLayoutEffect hooks and its use case, we become blank. I couldn’t spot the difference also as useLayoutEffect hooks are used in rare cases. I decided to check out the documentation to spot the difference.

This article is focused on explaining the two hooks, their differences and their use cases. The pre-requisite for this article is to be comfortable with basic React principles.

As developers, it is necessary we understand the technologies, tools, and languages we use to a large extent. This helps us apply the right principles to our project which in turn, would facilitate a better and more efficient application.

This article covers the following:

What is useEffect hook?
What is useLayoutEffect hook?
useEffect and useLayoutEffect - The Differences
useEffect and useLayoutEffect - Example

What is useEffect hook?

According to the React documentation, useEffect is a React Hook that lets you synchronize a component with an external system.

Syntax: useEffect (setup, dependencies?)

The setup in the above syntax represents the function with your effect’s logic. The setup function may also optionally return a clean-up function. When the components are first added or painted to the DOM, React will run the setup function and after every re-render with changed dependencies, React will first run the clean-up function (if provided) with the old values and then run the setup function again with the new values. After the component is removed from the DOM, React will run the clean-up function one last time.

Dependencies (optional): This has three forms; empty dependency array, no dependency provided and reactive value dependency provided. If no dependency is provided, React will run the useEffect function upon every DOM change. If an empty dependency array is provided, React will run the useEffect after only the first render i.e. this runs just once. If values are provided in the dependency, React with run useEffect if any of these values changes.

useEffect can be used in the following scenarios:

Connecting to an external system
Fetching data with effects
Controlling a non-react widget, etc.

Check out the official documentation for more detailed explanation.

A sample of useEffect Hook:

useEffect(() => {
        // do something ...
        return () => {
            // clean up happens here
        }
    }, []) // dependencies are added here in the array

What is useLayoutEffect Hook?

useLayoutEffect is a version of useEffect that fires before the browser repaints the screen.

Syntax: useLayoutEffect (setup, dependencies?)

The setup in the above syntax represents the function with your effect’s logic. The setup function may also optionally return a clean-up function. Before the components are first added or painted to the DOM, React will run the setup function and after every re-render with changed dependencies, React will first run the clean-up function (if provided) with the old values and then run the setup function again with the new values. Before the component is removed from the DOM, React will run the clean-up function one last time.

Dependencies (optional): This is the same as the above – reference to useEffect Hook.

useEffect and useLayoutEffect - The Differences

One major difference between useEffect and useLayoutEffect is that useEffect runs after the browser has been painted i.e. the users must have seen the application before the code in useEffect runs while useLayoutEffect runs or blocks the browser from painting ensuring the code inside the useLayoutEffect runs before the browser displays or makes the application visible to the users.

useLayoutEffect affects the performance of the application as the browser is blocked until the computation is done by useLayoutEffect. useEffect does not block the browser.

It is advised to avoid this as much as possible except in rare cases where the application is dependent on a specific computation.

useEffect and useLayoutEffect - Example

Below is a simple useEffect and useLayoutEffect function that increments count and num by 1 respectively. The below code illustrates the difference. When the code below is compiled, the count displays 0 and then changes to 1 within a second while num displays 1 as soon as the code is rendered to the screen. We can observe a flick with the count. This behaviour could confuse the users when this happens in a more complex application. To prevent the behaviour, useLayoutEffect becomes useful. When we need to compute some measurement before rendering our application, then we can use useLayoutEffect otherwise we can use the useEffect hook.

import { useEffect, useLayoutEffect, useState } from 'react'

const HooksUseCases = () => {
    const [count, setCount] = useState(0)
    const [num, setNum] = useState(0)

    useEffect(() => {
        console.log('excuting useEffect setup...')
        setCount(c => c + 1)
        return () => {
            console.log('running useEffect cleanup here..')
            setCount(0)
        }
    }, [])

    useLayoutEffect(() => {
        console.log('excuting useLayoutEffect setup...')
        setNum(n => n + 1)
        return () => {
            console.log('running useLayoutEffect cleanup here..')
            setNum(0)
        }
    }, [])

    return (
        <>
            <p>useEffect Count {count}</p>
            <p>useLayoutEffect Num {num}</p>
        </>
    )
}

export default HooksUseCases

In the above screenshots, we can see in the console that useLayoutEffect runs before useEffect. Here is a quick illustration of how the above code works when it is compiled:

count and num renders with their initial value of 0 respectively
React places it in the DOM and runs the code in the useLayoutEffect
useLayoutEffect code updates the num value by 1 and triggers a re-render. The value of count still remains 0 while num has incremented by 1 giving it the value of 1
React updates the DOM and the browser finally shows the update of count = 0, num = 1
After the browser has been painted, the useEffect code runs, incrementing count by 1 and trigger a re-render to update the DOM, count = 1 and num = 1. We can observe a quick change of count changing from 0 to 1 within milliseconds.
React updates the DOM again and the browser finally shows the update of count = 1, num = 1

Conclusion

In this article, we covered what useEffect and useLayoutEffect is and a sample of each hook. We also had a look at the difference and best use case for each of the hooks with a provided example to better understand the essence of this article.

It is recommended to look at the React documentation to better understand React hooks and how to use them. I would be writing more on these hooks. Now you should be able to differentiate between the two hooks and also identify when to apply each of the hook.

Thanks for reading.

Git for Beginners

adams mercy — Fri, 03 Jun 2022 23:52:17 +0000

Introduction

As a developer at any level, knowledge of Git is really essential. This tutorial is beginner friendly and covers everything you need to know to get started with Git, Git commands, Git hosting services, etc. as a developer. In this tutorial, we will answer: what is Git? , why Git? , how to use Git, what is version control system and many more.

Version Control

Version control, also known as source control, is the practice of tracking and managing changes to software code. Version control systems are software tools that help software teams manage changes to source code over time. Version control software keeps track of every modification to the code in a special kind of database. If a mistake is made, developers can turn back the clock and compare earlier versions of the code to help fix the mistake while minimizing disruption to all team members. Examples of version control system are Git, SVN (Apache Subversion), CVS, mercurial, etc.

What is Git?

Git is a free and open source distributed version control system designed to handle everything from small to very large projects. By far, the most widely used modern version control system in the world today is Git. Git has been designed with performance, security and flexibility in mind.

Why Git?

Git is good: Git has the functionality, performance, security and flexibility that most teams and individual developers need.
Git is a de facto standard: Git is the most broadly adopted tool of its kind. This makes Git attractive for many reasons. The predominance of Git also means that many third party software tools and services are already integrated with Git
Git is a quality open source project

Installing Git

Before you start using Git, you have to make it available on your computer. Even if it’s already installed, it’s probably a good idea to update to the latest version. Click here to read more on installing Git and here to set it up.

Configure Git

To ascertain you have Git installed, run “git --version” to see the version. Let’s get your identity set up on git.
The first thing you should do when you install Git is to set your user name and email address. Run the following commands:

[git config --global user.name “your username here”] [git config --global user.email “your email address here”]

Git commands

Here are the list of some common basic commands. Atlassian listed more basic git commands, see here.

Git hosting services

There are quite a number of Git repository hosting services. Examples are Bitbucket, GitHub, GitLab, and many more. I have used Bitbucket and am using GitHub currently. In the next few paragraph, I will cover GitHub.

GitHub

GitHub is the single largest host for Git repositories, and is the central point of collaboration for millions of developers and projects. A large percentage of all Git repositories are hosted on GitHub, and many open-source projects use it for Git hosting, issue tracking, code review, and other things.

Getting Started with GitHub

Head over to GitHub and create an account and then update your information.

How to use Git and GitHub

Go to GitHub, and under Repository tab, click on “New” to create a repository.

Give it a name
Make it public for other to access it / private if you don’t want others to access it

After creating the repo, a new page is displayed containing the commands to connect your remote repository with your local repository. Copy the all commands (using an icon displayed at the top of the commands) depending option best suited for you. The first commands is for a project you are just starting on in which you want to manage with git or a project you are working that isn’t managed with git while the second commands is for a project that exist on your local machine which is being managed by git locally only but you want to manage remotely on GitHub.

Open your project in a code editor and paste in the commands in the terminal (Visual Studio Code editor only)
Open and Paste the commands in your command line interface (examples are git bash, command prompt, etc.) and press enter to run the commands. Note: Visual Studio Code has a built-in command line interface. You can also install git bash to use it.
After this, your remote repository (GitHub) is connected to your local repository (local machine).
Make changes to your code, add those changes (git add .) and commit (git commit –m ‘your message’) and then push (git push) to update the remote repository. The below image shows the state of the remote repository after pushing the local changes.

Conclusion

There is a lot we can do and achieve with Git and any Git hosting service, like collaborating with other developers on projects, contributing to open source projects, etc.
This tutorial has guided you into what Git is, and has demonstrated how to use Git with GitHub. Always refer back to the commands above to see what they do and their usage. Happy coding and collaboration with developers.

Data fetching with Axios in React made simple

adams mercy — Wed, 26 May 2021 09:27:46 +0000

Introduction

I started a project on react which I was new to some months ago and I got to a point I needed to fetch data from the server and I encountered some difficulties trying to fetch data from API. After some research and practice, I understood the concept and was able to fetch data in some other projects. My aim is to work you through on how to get started with axios and understand the necessary and basic part so as not to get stuck. At the end of this article, you will be able to get and post data to a server.

Prerequisite

This project app is built with Material UI and React. A little knowledge of react will be helpful.

What is Axios?

Axios is a third party JavaScript library. Axios is a promise-based HTTP client easy to use for both browser and node.js.

Axios is a Promised-based JavaScript library that is used to send HTTP requests. You can think of it as an alternative to JavaScript's native fetch() function.

Axios is a modern, Promise-based HTTP client library. This means that Axios is used to send an HTTP request and handle their responses, all using JavaScript's promises. Axios supports both Node.js and JavaScript in the browser.

Features of axios

Make XMLHttpRequests from the browser
Make http requests from node.js
Supports the Promise API
Intercept request and response
Transform request and response data
Cancel requests
Automatic transforms for JSON data
Client side support for protecting against XSRF

Where do we make http request?

In a class based component, requests are made in componentDidMount() lifecycle while in a functional component, requests are made in react lifecycle hooks i.e. useEffect.
To use Axios, axios needs to be installed in your project and imported in the component you want to fetch data in. To install axios using npm which I used, run "npm install axios" in your command prompt.
Axios supports several request methods such as get, post, delete, put, etc.
Our major focus will be on get and post method which is commonly used.

Fetching data in Axios using the Get method

Axios offers a get method with at least one argument (url).

For example, let's see axios in action:

axios.get(' ')
.then(response => {
console.log(response);
});

The above code is a simple API fetch using axios. Now, let's explain:

Axios uses promises and get returns a promise 'then' which is a method which takes a function as the input and the function will get executed once the promise resolves, that is when the data from the server is there.

In the code, we create an arrow function where we fetched data from the server and passed in into a variable called getRepo and called it in the lifecycle hooks. The second parameter [ ] empty array was passed so that the lifecycle hooks runs just once.

Among the response gotten back from the API, we only need to display the data, that is why we stored response.data inside myRepo container and then passed it to the state.

The above image shows how the data fetched is being consumed or used in my component. Since the data returned is an array, we map through the array and then get the data we want to display and display it at the appropriate element.

The output will be:

Error Handling

If we have a network failure or if we make mistakes in the url, how do we handle this error?

To handle this error, add a catch method which catches any error you get, after the then method.

.catch ((error) {
console.log(error)
});

Output: Error handled properly

Another way to get or fetch data from the server using the async/await function

To use the async/await syntax, we need to wrap the axios.get() function call within an async function. We encase the method call with a try…catch block so that we can capture any errors. The variable “response” that receives the http data had to use await to ensure the asynchronous data was received before continuing.

How to Post data to the Server

Post method takes url as the input but also needs a second argument which is the data you want to send. You can also pass a third argument to configure the request. You can listen to the request and print it in the console.
The below code is another way to post data using the async/await function.

Conclusion

In this article, you have learned how to make http requests to the server using axios (an alternative to fetch) and we have been able to get data from server and also post data to the server using both promise and async/await which is a great start. I am sure this article has made you axios journey a nice one. Feel free to practice what you have learnt and exploit other axios request methods.