0
// why is this rendering 3 times and not 2 or 4?

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function useVariantActive(variant) {
  const [isActive, setIsActive] = useState(false);
  useEffect(() => {
    setIsActive(true);
    setTimeout(() => {
      setIsActive(true);
    }, 1000);
  }, [variant]);

  return isActive;
}

function ExampleComponent() {
  const varians = ["variant1"];
  const var1 = useVariantActive(varians);
  console.log("render", var1);
  return <div>wakka</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ExampleComponent />, rootElement);

I'd imagine this would render twice but it actually renders 3 times and if I add a guard around setIsActiveTrue like this..

if (isActive !=== true) {
   setIsActive(true)
}

it renders twice and subsequent setActive trues don't trigger another render. What gives?

https://codesandbox.io/s/react-hooks-usestate-forked-crtxl

Jason
  • 71
  • 5

1 Answers1

1

Because you are using setState inside useEffect, this causes an extra render.

See: useMemo vs. useEffect + useState

Nick
  • 1,161
  • 1
  • 12
  • 22