Question 214879 in Reactjs Question posted in
The new location for the React Documentation can be found here.

ReactJs: useEffect is not updating the local variable

I am developing a skeleton for an application using the react.js with actual scenarios until the APIs are being developed.

The local variable called accountType generates a dropdown in the Form component, is not getting updated.

If I am console logging inside the useEffect function then its working, but the variable is not getting updated.

export default () => {
    let accountTypes: Array<Object> = [];
    ...

    useEffect(() => {
        accountTypes = [
            {
                value: 1,
                label: 'Developer',
            },
            {
                value: 2,
                label: 'Personal',
            },
            {
                value: 3,
                label: 'Professional',
            },
        ];
    }, []);

    console.log(accountTypes);

    return (
        <Form accountTypes={accountTypes}>
           ...
        </Form>
    )
});

enter image description here

Not sure how to handle it as this is my first try on any frontend framework.

Tags:

3

Answers


  1. 0

    What’s going on here is that on first render, useEffect run, setting your variable, but then on subsequent runs, it gets set back to an empty array. I personally, would set it up like this:

    const accountTypes = [
            {
                value: 1,
                label: 'Developer',
            },
            {
                value: 2,
                label: 'Personal',
            },
            {
                value: 3,
                label: 'Professional',
            },
        ];

export default function AccountForm() {
   return (
        <Form accountTypes={accountTypes}>
           ...
        </Form>
    );
}

    However, if you expect to need to edit accountTypes, I would set it up like this:

    export default function AccountForm() {
   const [accountTypes, setAccountTypes] = useState([
        {
            value: 1,
            label: 'Developer',
        },
        {
            value: 2,
            label: 'Personal',
        },
        {
            value: 3,
            label: 'Professional',
        },
    ]);

   return (
        <Form accountTypes={accountTypes}>
           ...
        </Form>
    );
}
    Login or Signup to reply.
  2. 0

    Below is the example how to use useState hook. you can use take the reference from below code.

    import React from "react";
export default function App() {
  const [accountTypes, setAccountTypes] = React.useState([]);

  React.useEffect(() => {
    setAccountTypes([
      {
        value: 1,
        label: "Developer"
      },
      {
        value: 2,
        label: "Personal"
      },
      {
        value: 3,
        label: "Professional"
      }
    ]);
  }, []);

  console.log(accountTypes);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
    Login or Signup to reply.
  3. 0

    PROBLEM : You are getting [] in accountTypes because the UI is rendered before the UseEffect and since its local variable you can not see updated variable in console.log.

    The answer given by Risheekant Vishwakarma is correct.
    Here is another approach using USEREF to achieve what you want.

    import React, { useEffect, useRef } from 'react';

export default () => {
  const accountTypesRef = useRef([]);

  useEffect(() => {
    accountTypesRef.current = [
      {
        value: 1,
        label: 'Developer',
      },
      {
        value: 2,
        label: 'Personal',
      },
      {
        value: 3,
        label: 'Professional',
      },
    ];
  }, []);

  console.log(accountTypesRef.current);

  return (
    <Form accountTypes={accountTypesRef.current}>
      {/* ... */}
    </Form>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search