not getting new values from useState react

Question

Learning react by coding, here i'm using 'react-zoom-pan-pinch' for mouse scroll wheel, so when i zoomIn using mouse scroll and its scale gets bigger than '1.311' then it should make circle smaller ("10"), here i have created demo of what i want to achieve. https://codesandbox.io/s/react-zoom-pan-pinch-forked-svx5v6?file=/src/index.js

you can check from console when value gets bigger that circle becomes smaller,

but in my real code i'm using 'viewGenerator' (react-d3-graph) and customNode where i have that svg and circle

 import { Graph } from "react-d3-graph";

   const [circleR, setCircleR] = useState("50");

 
 const zoomChange = (event: any) => {
    if (event.state.scale < 1.311) {
      setCircleR("50");
    }
    if (event.state.scale > 1.311) {
      setCircleR("10");
    }
    console.log("event state scale ", event.state.scale);
    console.log("event circleR ", circleR);
  };
 
  function CustomNode(props) {
    return (
      <div>
        <svg viewBox="-1 -1 2 2">
          <circle
            cx="0"
            cy="0"
            r={circleR}
            strokeWidth="0.1"
            stroke= "black"
            fill= "orange"
          />
        </svg>
      </div>
    );
  }
 
 const default_config = {
    d3_config: {
      nodeHighlightBehavior: false,
      staticGraphWithDragAndDrop: true,
      automaticRearrangeAfterDropNode: false,
      d3: { disableLinkForce: true },
      height: 512,
      // width: 576,
      minZoom: 1,
      maxZoom: 1,
      node: {
        color: "lightblue",
        size: 500,
        highlightStrokeColor: "blue",
        fontSize: 20,
        highlightFontSize: 22,
        labelProperty: (node: default_config) =>
          node.name ? node.name : node.id,
        viewGenerator: (node) => (
          <CustomNode node={node}  focusId={null} />
        ),
      }
  };

  const [config, setConfig] = useState(default_config);


  <Graph
  config={config.d3_config}
  />

Problem is 'r={circleR}' is just taking default value from state, and its not updating it when i'm zooming in or zooming out.

Inside my 'zoomChange ' function i have two console.logs and i can check that it gives me right values and changes between '10' and '50' (zoomChange function works fine), then what is the reason i'm not getting updated value to 'r={circleR}' ? writing values to it like 'r="50" or r="10"' will work but i want updated values according to setState.

english is not my mother language so could be mistakes !

your codesandbox demo is working as expected. `r` is changing to `50` and `10` . when zooming in and out. — RHOOPH, Jun 29 '22 at 16:37
@RHOOPH yes that is working but i want to implement that in my real code (code i have added to question) — walee, Jun 29 '22 at 16:43
Does this answer your question? [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) — Chad S., Jun 29 '22 at 17:07
@ChadS. no it does not because when i do console.log(circleR) outside of 'CustomNode' function i'm getting new values — walee, Jun 29 '22 at 17:41
Because the circleR passed to the sub component is being closed with the definition . If you want to fix this, move the CustomNode definition outside whatever component it's in and have it take the circleR as a prop instead. — Chad S., Jun 29 '22 at 18:34

not getting new values from useState react

0 Answers0