DEV Community: Mihir Chhatre

React useReducer() 🪝

Mihir Chhatre — Wed, 08 Feb 2023 18:28:26 +0000

useReducer() can serve as a replacement for useState() in scenarios where more powerful state management is required.

useState() is the primary state management hook in React and it works well when state updates are simple and limited to a handful of updates. useReducer() works better when you have related pieces of data/state.

Below is the syntax for calling the Reducer hook:
const [state, dispatchFn] = useReducer(reducerFn, initialState, initialFn)

useReducer returns an array. The first element within this array is a state snapshot used in the component re-render cycle. The second element is a function that can be used to dispatch a new action(trigger an update of the state).

useReducer() takes 3 arguments. reducerFn is a function that is triggered automatically once an action is dispatched(via dispatchFn). It receives the latest state snapshot and returns the new, updated state. The second argument is the initial state (this is usually an object). initFn is a function to set the initial state programmatically.

Let's jump into some code to better understand these concepts

⚔️ useState() vs useReducer() ⚔️

1. Building with useState()

The code below creates an application where clicking on the button fetches 'posts' from a JSONPlaceholder and updates the states(there are three states - loading, post, error).

import React, {useState} from 'react'

function App() {

  const [loading, setLoading] = useState(false)
  const [post, setPost] = useState({})
  const [error, setError] = useState(false)

  const handleRequest = () => {
    setLoading(true)
    setError(false)
    fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then((res) => {
      return res.json()
    })
    .then((data) => {
      setPost(data)
      setLoading(false)
    })
    .catch((err) => {
      setError(true)
      setLoading(false)
    })
  }
  return (
    <div>
      <button onClick={handleRequest}>
        {loading ? "Wait..." : "Fetch the post"}
      </button>
      <p>{post?.title}</p>
      <span>{error && "Something went wrong!"}</span>
    </div>
  )
}

export default App

Let's first understand the code.

Inside the return block, we are displaying the post title and an appropriate message if there is an error.

Within handleRequest, the loading state is set to true. If the request is successful, I am updating the post state and setting the loading state as false. If the request failed, we are setting the error state as true and loading state as false.

The above example works as expected but on closer inspection you may notice how multiple states are updated together within a single function. Often, in such scenarios, replacing useState() with useReducer() is the preferred approach since we are updating multiple states together.

2. Building with useReducer()

Let's now try understanding how to implement the above application using useReducer().

import React, {useReducer} from 'react'

const postReducer = (state,action) => {
  switch(action.type){
    case "FETCH_START": return{
      laoding: true,
      error: false,
      post: {}
    }
    case "FETCH_SUCCESS": return{
      loading: false,
      error: false,
      post: action.payload
    }
    case "FETCH_ERROR": return{
      loading: false,
      error: true,
      post: {}
    }
    default: return state
  }    
}

const INITIAL_STATE = {
  loading: false,
  post: {},
  error: false,
}

function App() {

  const [state, dispatch] = useReducer(postReducer, INITIAL_STATE)

  const handleRequest = () => {
    dispatch({type:"FETCH_START"})
    fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then((res) => {
      return res.json()
    })
    .then((data) => {
      dispatch({type:"FETCH_SUCCESS", payload:data})
    })
    .catch((err) => {
      dispatch({type:"FETCH_ERROR"})
    })
  }
  return (
    <div>
      <button onClick={handleRequest}>
        {state.loading ? "Wait..." : "Fetch the post"}
      </button>
      <p>{state.post?.title}</p>
      <span>{state.error && "Something went wrong!"}</span>
    </div>
  )
}

export default App

postReducer is the reducer function that takes two arguments, state and action. state refers to the current state while action is used to pass information from the component to the reducer function. There are be three kinds of information that we would want to pass -

Case 1 : When the button is clicked, the component informs the reducer that a fetch request is initiated. The reducer then updates the state as follows:

loading - true
post - {}
error - false

Case 2: If is JSON is fetched successfully, the component informs the the reducer and shares the response object. The reducer updates the state as follows:

loading - false
post - {id:1, title: "some_title, desc: some_description}"
error - false

Case 3: If there is an error in fetching the JSON, the component passes this information to the reducer. The reducer then updates the state as follows:

loading - false
post - {}
error - true

The above example illustrates perfectly how useReducer() makes the complex multiple state updation process seamless. 👌.

The reducer hook provides the ability to perform declarative state updates by decoupling state updates from the action that triggered the update.

The dispatch function allows us to send actions to the reducer. The reducer function essentially updates the state and returns the updated version of the state.

If you observe closely, the reducer function is written outside the scope of the component function. The reason behind this is because the Reducer function(postReducer) does not need to interact with anything defined within the component function. All information required inside the reducer function will be passed by React automatically.

It's completely understandable if the reducer hook got you feeling like this 👇

useReducer() tends to be a complex hook to grasp but understanding its functionality will go a long way when learning Redux.

React useRef() 🪝

Mihir Chhatre — Sat, 28 Jan 2023 20:24:31 +0000

useRef() is similar to useSate() as it allows us to persist(remain unchanged) values between renders but unlike useState(), the Ref hook does not cause a re-render when the mutable value is changed.

useRef() returns a mutable object whose current property is set with an initial value that is passed as an argument to the Ref function.

const refObject = useRef(initial_value);

In the above example, refObject is the returned object. This object has a current property that can be used to obtain the value of the referenced object at any time.

There are two primary uses of useRef() -

To create persisted mutable variables(these are called refs or references).
To access DOM elements(or React elements).

Let's dive into these.

1. useRef() to create persisted mutable variables

Trying to count the number of times a component re-renders using useState will lead to an infinite loop as useState itself causes a re-render. This is demonstrated in the example below.

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

function App() {

  const [text, setText] = useState('')
  const [count, setCount] = useState(0)

  useEffect(() => {
    setCount(prevStateCount => prevStateCount + 1)
  })

  return (
    <div>
      <input value={text} onChange={e=>setText(e.target.value)} />
      <div>Type some text in the box</div>
      <div>Component rendered {count} times</div>
    </div>
  )
}

export default App

During initial component render, the 'count' is incremented which causes the component to re-render, and hence the count increments again leading to re-rendering the component. Essentially this is an infinite loop of incrementing 'count' and component re-rendering.

Refs to the rescue 🛟...
Refs can be used to solve the infinite loop issue that arises due to re-rendering when using the state hook.

import React,{useState, useEffect, useRef} from 'react'

function App() {

  const [text, setText] = useState('')
  const count = useRef(1)

  useEffect(() => {
    count.current = count.current + 1
  })

  return (
    <div>
      <input value={text} onChange={e=>setText(e.target.value)} />
      <div>Type some text in the box</div>
      <div>Component rendered {count.current} times</div>
    </div>
  )
}

export default App

useRef() replaces useState() and count is an object with a current property. The current property persists as it is updated between different renders.

We can observe from the image below, each time a character is entered in the input field, the count increments. Since 'apple' is entered, the count is incremented 6 times (1 on initial render + increment by 1 for each character). Irrespective of the number of times the count changes, our component is not re-rendered since it is decoupled from our component render cycle.

2. Accessing DOM elements

A more common use for Refs is when we need to reference HTML elements.

Every HTML element has a ref attribute. We can add the ref attribute to the element to access the element directly in the DOM.

Let's understand this use case with an example. Consider the code for a scenario where we want to focus on an input when a button is clicked.

import React,{useRef} from 'react'

function App() {

  const inputRef = useRef()

  const focus = () => {
    inputRef.current.focus()
  }
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focus}>Click to focus</button>
    </div>
  )
}

export default App

Each time 'inputRef' is rendered on the screen, the 'inputRef' variable is set to the input element. Therefore, in the focus function, we are accessing 'inputRef' variable's current property(this corresponds to input element) and then focussing on it.

From the screenshot attached below, we can observe how clicking on the button focuses on the input.

Another hack with useRef() 💡 -->
Imagine updating the state with every character when dealing with forms. This could be slightly excessive. Using Refs, we can set up a connection between the HTML element that is rendered eventually and other JavaScript code.

👏 Congratulations & great going 👏. You have now covered three React hooks. This would be a good point to re-collect your understanding of these hooks.

If you feel confident 😎, dive straight into Part 4 where I cover useReducer().

React useEffect() 🪝

Mihir Chhatre — Sat, 28 Jan 2023 06:03:05 +0000

The useEffect() hook helps us perform side effects within our functional components.

Let's start by understanding what are side effects.
Side effects are tasks that happen with the outside world, they refer to any actions that happen outside the normal component evaluation and render cycle. These could include sending/receiving HTTP requests/responses, and setting & managing timers.

It is important to note that these side effects are not predictable since we are performing actions outside our React components. For example, the HTTP response could fail.

The syntax for useEffect is shown below:
useEffect(() => {...},[dependencies]);

useEffect() takes two arguments -

The first argument is a function that should be executed after every component evaluation if the specified dependencies changed. The side effect code is placed in this function.
The second argument is a dependency array. The function in the first argument only runs if one of the dependencies in this array changed.

The dependency list is an optional argument. If no dependency array is passed, the function specified in useEffect runs during every render cycle. If an empty array is used as a dependency, the function runs only on the first render.

Let's get building 🏗️ ...

Consider the code given below to create a single-component application.

import React, { useState, useEffect } from "react";

function App() {
  const [resourceType, setResource] = useState("posts");

  useEffect(() => {
    fetch(`https://dummyjson.com/${resourceType}`)
      .then((res) => res.json())
      .then((json) => console.log(json));
  }, [resourceType]);

  return (
    <React.Fragment>
      <div>
        <button onClick={() => setResource("posts")}>Posts</button>
        <button onClick={() => setResource("carts")}>Carts</button>
        <button onClick={() => setResource("users")}>Users</button>
      </div>
      <h1>{resourceType}</h1>
    </React.Fragment>
  );
}

export default App;

The application will have 3 buttons to select a resource type. Using the resource type selected, we hit dummyJSON's /posts, /cards & /users endpoints.

Since we want to dynamically change the endpoint, the fetch URL is appended with ${resourceType} in the code. The dependency list for running the side effect contains resourceType. Therefore, any change to the resourceType will result in querying the appropriate endpoint and logging the result. We are essentially running a side effect each time the resourceType changes.

On initial load, Posts is selected since it is passed as the initial state to useState()

After clicking Carts button.

After clicking Users button.

Performing cleanup activities with useEffect()

We can return a function within useEffect(). This function is called before every new side effect execution and whenever the component is removed (the cleanup function does not run before the first side effect execution).

Below is an example demonstrating the cleanup functionality. (We are using the previous code with a few tweaks - no longer sending requests, and adding a return function)

import React, { useState, useEffect } from "react";

function App() {
  const [resourceType, setResource] = useState("posts");

  useEffect(() => {
    console.log("Resouce Changed");

    return () => {
      console.log("Return from resource change");
    }
  }, [resourceType]);

  return (
    <React.Fragment>
      <div>
        <button onClick={() => setResource("posts")}>Posts</button>
        <button onClick={() => setResource("carts")}>Carts</button>
        <button onClick={() => setResource("users")}>Users</button>
      </div>
      <h1>{resourceType}</h1>
    </React.Fragment>
  );
}

export default App;

As you can observe from the screenshot below, on initial render, "Resource changed" is logged.

When we change our resource(clicking on the 'Carts' or 'Users' button), we observe "Return from resource change" is logged first and then "Resource Changed" is logged -->

Hence, the return code is run first and then the setup code. This happens because the return code is essentially a cleanup code.

useEffect() tends to puzzle many developers so don't beat yourself if some concepts take longer to grasp! 😄

React useState() 🪝

Mihir Chhatre — Fri, 27 Jan 2023 04:47:10 +0000

Let us first understand state in React.

State can be imagined as the data or property that is used within an application. These data/property values would likely change over time and the State hook in React helps us track & manage the changing states.

To use the State hook, we need to import it as shown below:

import React, {useState} from 'react'

We can then invoke useState() inside the component function and pass an initial state(this value can be any type such as string, number or object) as an argument:

const [count, setCountValue] = useState(0);

The useState() hook returns an array, where the first element corresponds to the current state and the second element is a function that allows us to update the current state.

Let's get building 🏗️

Consider the code for a simple counter functionality -

import React, {useState} from 'react'

const App = () => {

    const [count, setCountValue] = useState(1)

    const decrement = () => {
        setCountValue(prevState => {
            prevState-1
        })
    }

    const increment = () => {
        setCountValue(prevState => {
            prevState+1
        })
    }

    return(
        <div>
            <button onClick={decrement}> - </button>
            <span> {count} </span>
            <button onClick={increment}> + </button>
        </div>
    )
}

export default App;

Simplifying the code above...

useState() is called within the component function and an initial state(1) is passed to it. This means that when the component is rendered for the first time(when the page is loaded initially), the counter is set to 1.

As mentioned earlier, useState() returns an array with two elements. Here, using array destructing, the current state is stored in the count variable and the function to update the current state is setCountValue.

The + button triggers the increment function and - triggers the decrement function. I am using the setCountValue function to update the current state value.

Let's have a look at a common mistake developers tend to make when trying to update the state using the previous state :

const decrement = () => {
        setCountValue(count - 1)
    }

Why is the above approach an incorrect one to update the state value?
When we modify the state using the previous state value(in the above code we are using the count variable directly), we must use the function version of setting state as shown below.

const decrement = () => {
        setCountValue(prevState => {
            prevState-1
        })
    }

prevState is the previous state snapshot that React provides. The reason behind using this approach is that the state updating function in React schedules the state update. By using the function version to set the state, we can ensure that the previous state is always updated(latest).

Diving deeper into useState()

Each time the state updating function is called, the state is updated and the component function from which the useState() is initialized is executed again.

It is also important to remember that useState() registers a different state for each component instance and React manages states independently on a per-component basis.

Here are two frequently frequently asked questions when using useState():

Why does useState() use const since the state value is updated?
--> The way to think about this question is that each time the component is rendered(state update function is called), a new variable is created and managed somewhere else, internally, by React.
Does the default state not override the current state value each time the state updating function is called and the component is rendered?
--> React keeps track of the first instance where useState() was called and prevents any default state overwrites during subsequent component renders.

Another important concept to understand is how to work with objects and useState():

    const [state, setState] = useState({count:4, toggle:'Yes'})
    const count = state.count
    const toggle = state.toggle

    function decrement() {
        setState((prevState) => {
            return ({
                count: prevState.count-1
            })
        })
    }

The above code is incorrect since the setState update function overrides the previous state with only the updated count(toggle:'Yes' is removed).

The correct way to use an object is to spread the previous state and then set the new state -

    function decrement() {
        setState((prevState) => {
            return ({
                ...prevState,
                count: prevState.count-1
            })
        })
    }

Finally, lets talk about an advance concept when using useState().

Consider setting the initial state as a: useState('a'). When using state hook, the initial state a is called each time the function is run. If a computationally complex argument is defined as the initial state, it would run during every subsequent component function render, leading to a degradation in performance.

Therefore, there is another way to pass state to useState(), a function version.
useState(() => {return 4})

The approach runs the initial state function only during the first component render. This approach is preferred when we have a computationally intensive initial state.

The gamut of information around useState() can be overwhelming 🤯. Remember to go slow and understand the concepts as it would you build a 💪 base in React.

Intro to Hooks

Mihir Chhatre — Fri, 27 Jan 2023 04:46:47 +0000

Using hooks in React can be daunting 😰.
My goal, through this series, is to simplify the different hooks used in React, allowing folks to start implementing these concepts into their builds.

Since this is Part 1 of the series, let's scratch the surface on hooks.

The React documentation defines hooks as -
Functions that let you “hook into” React state and lifecycle features from function components.

The above definition will make a lot more sense as we go through this series but it is important to remember a few important points when using any hook in React -->

Hooks can only be used inside function components and they cannot be used inside class components.
Hooks must execute in the same order in each component render. (This essentially means you cannot use a hook inside a conditional block such as 'if'.)

You can always reference the official React documentation to learn more about hooks but since series is about understanding the different hooks, I am jumping right into one of the most widely used hooks - the State Hook.

Dark Mode Toggle ↔️

Mihir Chhatre — Sat, 21 Jan 2023 18:36:34 +0000

I have always been intrigued by how a simple dark mode can enhance a user interaction experience. To kick off my creative coding journey, I designed the widely used dark-mode toggle.

Let's get building 🏗️

Here's how the toggle would work ->

HTML

An input tag of type 'checkbox' allows switching between modes.

Using the label helps create a view for the toggle. Inside the label, I have used Font Awesome icons to represent the ☀️ and 🌑. The toggle animation and current state representation can be mimicked using a ball within the toggle.

Within the HTML code, it is important to observe how the input and label are linked to produce a check & un-check effect each time the label is clicked.

CSS

First, we need to import Font Awesome to represent the icons. This can be achieved by navigating to the CSS section within the codepen settings. (Simply search 'font awesome' and add it to the external stylesheet.)

The height and width of the body are set to 100vh and 100vw respectively. This essentially means if your screen's dimension is 800*1000, the body will have a dimension of 800*1000 (100% of the screen dimension).

It is important to note that 100% is not the same as using 100vh(or 100vw). An example of one such scenario is shown below -

p is set to 100% height. However, since it is enclosed within a div whose height is 200px, p will have a height of 200px. To ensure that p has the height of the entire body, we can substitute 100% with 100vh to ensure p's height is independent of div's height.

Why use box-sizing?
This property allows us to include the padding and border in an element's total width and height. 'border-box' informs the browser to include any border and padding within the values you specify as the element's dimensions.

The value of the checkbox can be obtained by using the checked pseudo-class. Since we use the adjacent selector('+'), we first target the label, and then the ball.

JavaScript

We target the checkbox and add an event listener to it. Since a checkbox input is used, the change function (adding/removing the 'dark' class to/from the body) is triggered each time the input is checked or unchecked (the mode is toggled).

Voila!
You have a functioning dark mode toggle that you can tweak and reuse! 👏

(P.S Dark Mode >>> Light Mode)