In this lesson, we’ll cover React state, how it works, and how we can use theuseStateHook to build a simple dice rolling app. Let’s begin! View Demo View Code React Dice By the end of this tutorial, you’ll have mastered state in React using theuseStateHook. We’re going to cov...
Learn, how to use the useLocation hook in react-router. If your are new to hooks checkout my react hooks introduction tutorial. useLocation…
In this tutorial, we are going to learn about how to use the useParams() hook in react router. If you are new to hooks then check out my react hooks introduction tutorial. useParams() hook The useParams() hook helps us to access the URL parameters from a current route. Example: Cons...
Let’s learn how we can use theuseContextHook in React to help us build a simple Spotify clone ! I’m using the Bulma CSS library and FontAwesome in my examples below. I’ve als created a fresh React app using Create React App. You can do the same, or use an existing React project...
useEffect React hook, how to use Find out what the useEffect React hook is useful for, and how to work with it!Check out my React hooks introduction first, if you’re new to them.One React hook I use a lot is useEffect.import React, { useEffect } from 'react'...
Find out what the useState React hook is useful for, and how to work with it!Check out my React hooks introduction first, if you’re new to them.One React hook I most often use is useState.import React, { useState } from 'react'...
Here’s a guide on how to use the useMemo() React Hook: The useMemo() Hook is a built-in React Hook that allows you to memorize the result of a computation. It’s useful when you have a costly function or calculation that you only want to run when certain dependencies change. ...
Image sizes: You’ll need to consider how images will look on different devices and may need to use different sizes for different screen sizes to ensure that they look good and don’t take up too much bandwidth. In the following sections, we’ll learn about react-responsive design and how...
In summary, the useContext hook in React provides a straightforward way to share values like these between components without having to explicitly pass a prop through every level of the tree. React useContext, being part of the official React API, is optimized for performance and ensures that com...
How to use useReducer? Let’s create a simple component in our react js app and named it “UseReducerExample.js” as below. Code import React from 'react' function UseReducerExample(){ const defaultValue = 0; return ( Maintain state with UseReducer Increment Decrement {defaultValue} ) }...