-1

Can anyone tell me why at button click, the value outputted to the console is always one unit smaller than displayed on the screen? The values are not in sync as expected.

Example below in React

In Child:

import React, {useState } from "react";

export const ChildComp = ({getNumProps}) => {
    const [num, setNum] = useState(0);
    

    const onPlusClick = () => {
        
        if (num< 12) {
          setNum(num + 1);// num does not increase immediately after this line, except when focus reenters here on second method call
        }
        
        getNumProps(num);
      }

    return(
        <div>
            <button onClick={onPlusClick}>
                Click to increment
            </button>
            {num}
        </div>
    );
}

In parent

import { ChildComp } from "./ChildComp"

export const ParentComp = () => {

    const getNum= (num) => {
        console.log(num);
    }

    return (<ChildComp getNumProps={getNum}/>)
}

The page initially shows 0

  • When I click once the number increments to 1, but console displays 0
  • When I click once the number increments to 2, but console displays 1 I should see in the console the same as the page display

Appreciate if you can leave a commen on how the question can be improved.

This is a child to parent communication example. Also, any objections about standards used, please let me know.

Thanks.

Update: I notice the values would be in sync if instead of getNumProps(num); I did getNumProps(num + 1); but that doesn't change the fact that previously on this line setNum(num + 1);, as already pointed out in the comment, num does not increase immediately after this line, except when focus reenters here on second method call. Not sure why.

Sami
  • 113
  • 3
  • 12

1 Answers1

1

The prop function getNumProps is a side effect, and should be put into a hook, instead of inside of that onPlusClick function.

Instead, do this:

useEffect(() => {
   getNumProp(num);
}, [num]);

Alternatively, to avoid the error: "React Hook useEffect has a missing dependency: 'getNumProps'. See this doc on using the useCallback hook

const callback = useCallback(() => {
   getNumProp(num);
}, [num]);

function onPlusClick(...) {
   ...
   callback();
}

The change to the state of num will cause a re-render of the child component, not the parent.

matabeitt
  • 160
  • 9
  • Thank you! I am gettign this error not sure why: "React Hook useEffect has a missing dependency: 'getNumProps'. Either include it or remove the dependency array. If 'getNumProps' changes too often, find the parent component that defines it and wrap that definition in useCallback. " I have added useEffect on the same level as onPlusCluck. I need to perform some extra actions like changing colours when the button is clicked, depending on number of iteration (current value displayed), so it still makes sense to keep that method. – Sami May 24 '22 at 14:50
  • 1
    You can take a read on that here https://stackoverflow.com/q/55840294/13402209 it is a known issue with React's `useEffect` API. That issue should only be a non-blocking warning. You can also give this a read https://stackoverflow.com/q/55840294/13402209 and instead use `useCallback` instead of `useEffect` the same way described above. – matabeitt May 24 '22 at 14:55
  • Thank you. Actually with the callback example the number displayed and the one logged to console are still not in sync. I don't understand why – Sami May 25 '22 at 04:37