I have the following array that include objects using React, this array display the users fields data in a specific page.

What is the right way to update this ponent using useEffect, specifically the array on load of the page before data are rendered, to include:

new element to push in the array

(on load of the page)

userData.splice(3, 0,
        {
          key: "gender",
          label: "DFR",
        },
    );

Initial Array

  const userData = [
    {
      key: "first_name",
      label: "XYZ",
    },
    {
      key: "last_name",
      label: "XYYZ",
    },
    {
      key: "username",
      label: "ABC",
    },
    {
      key: "age",
      label: "ABCC",
    },
    {
      key: "nationality",
      label: "EDP",
    },
  ];

I have tried the following but for some reason it wont work:

  useEffect(() => {
    userData.splice(3, 0,
        {
          key: "gender",
          label: "DFR",
        },
    );
  }), [];

P.S: As you can see, i don't intend to use push.

I have the following array that include objects using React, this array display the users fields data in a specific page.

What is the right way to update this ponent using useEffect, specifically the array on load of the page before data are rendered, to include:

new element to push in the array

(on load of the page)

userData.splice(3, 0,
        {
          key: "gender",
          label: "DFR",
        },
    );

Initial Array

  const userData = [
    {
      key: "first_name",
      label: "XYZ",
    },
    {
      key: "last_name",
      label: "XYYZ",
    },
    {
      key: "username",
      label: "ABC",
    },
    {
      key: "age",
      label: "ABCC",
    },
    {
      key: "nationality",
      label: "EDP",
    },
  ];

I have tried the following but for some reason it wont work:

  useEffect(() => {
    userData.splice(3, 0,
        {
          key: "gender",
          label: "DFR",
        },
    );
  }), [];

P.S: As you can see, i don't intend to use push.

• javascript
• reactjs
• algorithm
• ecmascript-6
• react-hooks

• Could you explain why you don't want to use push? – Ezrab_ Commented Jan 1, 2021 at 16:34
• @Ezrab_ i am using splice instead because i want the data to be displayed at a specific position, also i need that logic to be triggered on load of the page – John D Commented Jan 1, 2021 at 16:40
• I didn't pletely understand what you want to do. You want to modify the initial array and use the new value BEFORE the ponent has rendered initially? If that is so, you can't do that with a hook, as hooks are run after ponents are already rendered. The effect of the useEffect hook will present itself AFTER the initial rendering. – zhulien Commented Jan 1, 2021 at 16:42
• Also, are the items you want to insert into the array available to the ponent or are they fetched from somewhere? – zhulien Commented Jan 1, 2021 at 16:49
• @zhulien thats correct, what you described is exactly what i was trying to acplish, also the new item is mentioned above in the post. not fetched from elsewhere. – John D Commented Jan 1, 2021 at 17:05

3 Answers 3

Yes cause you just update directly in the variable userData. If you want React rerender you should use setState

    const [userData, setUserDate] = useState(initialData)
    
    useEffect(() => {
        setUserDate(userData.splice(3, 0,
            {
              key: "gender",
              label: "DFR",
            },
        ))
   }), [];

Maybe the better way is to use ES6 spread syntax.

useEffect(() => {
    userData = [...userData,{key: "gender",
          label: "DFR"}]
    );
  }), [];

You don't need to use an effect for that (actually, quite on the contrary - you shouldn't).

useEffect is a hook that gets called after the initial rendering of the ponent.

In your case, you just simply need to generate a set of fields in the form of an array to be used for the ponent rendering. If those fields are static, not changing and are always the same for the given ponent, you just encapsulate them in a normal variable in the ponent itself and then you use them in the rendering. As simple as that.

On the other hand, if they're non-static and different instances of the same ponent can have a different set of fields - calculate them in the parent ponent and pass them down as props.

If, however, the fields can change dynamically throughout ponent's lifetime, you need to use state. Once again, you simply assign the calculated field set to the initial state and you're done.

In all of those cases, you'll get your fields ready before the render phase has happened.