React & Javascript optimization - arrays, spread, splice

Question

I have a little problem understanding something. So I need your help to do an example for me. Please kindly write this two functions with a better solution.

the setTempRecipe is a coming from useState hook in my react functional component.

const addCustomizationOption = (co) => {
    const tmpR = Object.assign({}, tempRecipe);
    tmpR.customizationOptions.push(co);
    setTempRecipe(tmpR);
};

and the second one is:

const removeCustomizationOption = (co) => {
    const tmpR = Object.assign({}, tempRecipe);
    const g = tmpR.customizationOptions.findIndex(item => item.id === co.id);
    tmpR.customizationOptions.splice(g, 1);
    setTempRecipe(tmpR);
};

Alexis · Accepted Answer · 2021-08-19 08:21:02Z

2

const addCustomizationOption = (co) => {
    setTempRecipe({
                   ...tempRecipe,
                   customizationOptions:[...tempRecipe.customizationOptions,co]
                  });
};


const removeCustomizationOption = (co) => {
    setTempRecipe({
                   ...tempRecipe,
                   customizationOptions:tempRecipe.customizationOptions.filter(i => i.id !== co.id)
                  });
};

answered Aug 19, 2021 at 8:21

Alexis

5,8211 gold badge30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexis Over a year ago

take care that customizationOptions array must be instanciated before adding a customization option or it will crash. @AminNoura

Sinan Yaman · Accepted Answer · 2021-08-19 08:22:14Z

1

You have the right idea, you shouldn't mutate state variables, instead take a deep copy and apply new values. What I would go for is:

const addCustomizationOption = (co) => {
    setTempRecipe(tr => ({...tr, customizationOptions: [...tr.customizationOptions,co]}));
};

This spread operator will add co to the tempRecipe array and tr refers to the current state.

And, for the second one, you can filter the array:

const removeCustomizationOption = (co) => {
    setTempRecipe(tr => ({...tr, customizationOptions: tr.customizationOptions.filter(recipe => recipe.id !== co.id))})
};

Since .filter() function returns a new array, you can directly filter out the id and set the new filtered array.

edited Aug 19, 2021 at 8:22

answered Aug 19, 2021 at 8:17

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

3 Comments

Alexis Over a year ago

It's wrong, tempRecipe is an object with props, not an array

Amin Noura Over a year ago

needed to push into tmpR.customizationOptions

Sinan Yaman Over a year ago

Yep, fixed it now. My mistake.

Collectives™ on Stack Overflow

React & Javascript optimization - arrays, spread, splice

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related