React.js useEffect and dependency array, using destructuring useState

Question

React.js useEffect and dependency array

A tutorial code, invoke a state change function, to force a render ( adding a comma using array destructuring).

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

const useAnyKeyToRender = () => {

    const [ , forceRender ] = useState();

    useEffect( () => {
        window.addEventListener( "keydown", forceRender );
        return () => window.removeEventListener( "keydown", forceRender );
    }, [] );

};

export default function App() {

    useAnyKeyToRender();

    useEffect( () => {
        console.log( "fresh render" );
    } );

    return <h1>Open the console</h1>;
}

In this hook we don’t care about the state value. We only want the state function: forceRender.

I understand how arrays destructuring works

const [fruit, setFruit] = useState('banana');

is equivalent to

var fruitStateVariable = useState('banana'); // Returns a pair
var fruit = fruitStateVariable[0]; // First item in a pair
var setFruit = fruitStateVariable[1]; // Second item in a pair

I don't understand how this code works

 const [ , forceRender ] = useState();

Why the first array element is blank (ignored), and why forceRender is the second element.

Why setForceRender is not used ?

How is invoked forceRender ?

I understood the goal of this hook, but no the dependency array trick.

If i do: console.log(forceRender), appears:

  ƒ bound dispatchAction() {}
<constructor>: "Function"
name: "Function"

I don't understand how this hook works, and how forceRender function mechanism. It seems simples but i'm confused.

TechStudent10 · Accepted Answer · 2022-12-29 18:11:02Z

1

I couldn't seem to find any information online, so I am going to give you what I think is happening. I am not an expert, just someone who wants to provide his perspective. If anyone wants to correct me, please do!

With that out of the way:

Let's look at this line of code:

// This isn't really useful but for the sake of this explanation
const [, setName] = useState("John")

The return statement of useState would look something like this:

function useState(initialState) {
    // other code here
    return [state, setState]
}

setState is at index 1, and we are requesting that index 1 is assigned to setName, and ignore index 0. This is what I believe is happening. This may be incorrect or maybe not even known due to it not being documented well (I couldn't even find any info on MDN!), but this is what I think is happening.

answered Dec 29, 2022 at 18:11

TechStudent10

899 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Stéphane Over a year ago

Hi, thanks for your answers! It seems the first element in the array is blank const [ , forceRender ], the state value is ignored, what is wanted is the state function: forceRender. But it's not yet very clear how it exactly works.

Stéphane Over a year ago

The difficulty here is setName is not used but name : const [, name] = useState("John"), like the const [ , forceRender ] = useState();

Stéphane Over a year ago

The legitimate construction is const [fruit, setFruit] = useState('banana');

user2740650 Over a year ago

useState returns an array with two elements (the value, and the setter. The const [value, setValue] = useState syntax is simply setting value to the first and setValue to the second. valueand setValue are just variable names so you can call them whatever you like. In your case, the value is not used so const [ , forceRender ] is simply throwing away the value and storing the setter function into forceRender.

Stéphane Over a year ago

Thanks for your nice comment. I guessed useState was related to getter and setValue is related to setter. Using the destructuring array method could be confusing in the beginning.

Collectives™ on Stack Overflow

React.js useEffect and dependency array, using destructuring useState

React.js useEffect and dependency array

1 Answer 1

With that out of the way:

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

React.js useEffect and dependency array

1 Answer 1

With that out of the way:

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related