Next.js Discord

Discord Forum

useReducer value not updating inside functions

Answered
Anay-208 posted this in #help-forum
Open in Discord
Anay-208OP
Here is a short snippet of my code:
//...

  const [state, dispatch] = useReducer(reducer, { email: "" });

//...
  useEffect(() => {
    console.log(state);
  }, [state]);

//...

  function somefunc() {
    console.log(state);
}

So here's what happening. Inside useEffect, everything is working and getting printed fine.

However, when I console.log it inside state, the default Value is being printed instead of the current value
Answered by Anay-208
I edited my function to this to fix:
  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!recaptchaReady) return;
    console.log("executed");
    if(!recaptchaRendered){
    window.grecaptcha.render("recaptcha", {
      sitekey: process.env.NEXT_PUBLIC_RECAPTCHA_SITEKEY,
      callback: action === "signin" ? signin : signup,
      size: "invisible",
    });
    setRecaptchaRendered(true);
  } else {
    window.grecaptcha.reset()
  }
    window.grecaptcha.execute()
  }
View full answer

12 Replies

Anay-208OP
I'm also aware that these are just queue, but what can I do about it?
awareness481
Since the function is recreated on every render that should not be the case, can you provide a minimal repro?
Anay-208OP
Instead, I'll send more part of my code, like the reducer. it might be useful in reproduction
//reducer

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "SET_EMAIL":
      return { ...state, email: action.payload };
    case "SET_NAME":
      return { ...state, name: action.payload };
    default:
      return state;
  }
}

// load reducer
  const [state, dispatch] = useReducer(reducer, { email: "" });

//elements:

  const registerElements: Elements[] = [
    {
      type: "text",
      name: "name",
      placeholder: "name",
      onChange: (e) => dispatch({ type: "SET_NAME", payload: e.target.value }),
      value: state.name || "",
    },
    {
      type: "email",
      name: "email",
      placeholder: "email",
      onChange: (e) => dispatch({ type: "SET_EMAIL", payload: e.target.value }),
      value: state.email || "",
    },
  ];


//input
{(action === "signin" ? loginElements : registerElements).map(
          (loginElement) => (
            <input
              required
              key={loginElement.name}
              type={loginElement.type}
              name={loginElement.name}
              placeholder={loginElement.placeholder}
              onChange={loginElement.onChange}
              value={loginElement.value}
              className="w-full border-b-2 border-white bg-transparent px-0 py-1 capitalize text-white transition placeholder:text-gray-200 focus-visible:border-b-yellow focus-visible:outline-none"
            />
          ),
        )}
Anay-208OP
Bump
Anay-208OP
Bump
Anay-208OP
Bump
Anay-208OP
bump
Anay-208OP
bump
Anay-208OP
I edited my function to this to fix:
  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!recaptchaReady) return;
    console.log("executed");
    if(!recaptchaRendered){
    window.grecaptcha.render("recaptcha", {
      sitekey: process.env.NEXT_PUBLIC_RECAPTCHA_SITEKEY,
      callback: action === "signin" ? signin : signup,
      size: "invisible",
    });
    setRecaptchaRendered(true);
  } else {
    window.grecaptcha.reset()
  }
    window.grecaptcha.execute()
  }
Answer