What is the advantage of using the setState() function to modify an array?

Asked

Viewed 68 times

1

I checked that it is possible to modify an array in the state in two ways:

  1. this.setState({meuArray: [...meuArray, 'novoValor']}); // ...meuArray é o espalhamento de meuArray

  2. this.state.meuArray.push('novovalor');

Which of the above two forms has greater efficiency?

javascript react

  • The second way is completely discouraged in the React ecosystem, as you would be mutating the state - something completely abhorrent in this situation. The first may cause performance problems (in some cases), but if I were you, I would keep it, since seeking premature optimizations is not always a good option.

  • To queue the state changes and update the UI, remembering that the first argument accepts function and closures to apply with Return, is part of the "life cycle" of the components. They use a new "innovative" (they name something that probably already existed in another way and do a damned marketing on top to say that this is better than anything to gain fans) methodology called "Functional Programming", read more in [tag:functional programming]

  • In fact I have studied functional programming over the years, from university to today always studying and learning.

  • What I hate most about Stackoverflow is that they downvote everything for nothing. Is the question wrong? If someone doesn’t find a question interesting is reason enough to vote negative? Wouldn’t it be better to leave with the score 0. I am native in Portuguese, but I am not allowed to answer questions in this forum by the excess of votes down, but there in English I’m walking to a score of 200 in half a year...

  • I was not the one who denied the question, I just came here to help commenting to see if it was what I was looking for, and not to be accused and receiving complaint, if you want to complain do in META, maybe there point the problem, I do not know what the problem of the question, it seems to me a normal question and I can’t even imagine now the reason for a downvote, but it is much more likely q is a fair reason and not a personal attack.

  • I just wanted to talk to you because it happens a lot. I didn’t accuse anyone or name names.

  • All right dear Maf, but here is not the place, I do not understand much of React’s CORE, only the same use, but if I can see the CORE better maybe I formulate the answer, otherwise the reason is the methodology I have cited and "marketing" forced up to win fans that most frameworks and toollkits do, give names to things that might already exist, I’m not saying not to use, I’m just commenting on how the "marketing occurs".

  • I apologize for speaking here. I didn’t know.Thank you both for your answers.

Show 3 more comments

1 answer

2


In those two cases you pointed out, nay is about what is more efficient, but what is right and what is wrong within the conventions adopted by React.

To documentation states that any attempt to update the state through a direct modification (also called mutation) is incorrect, see:

Don’t Change State Directly

For example, this will not render the component again:

// Errado
this.state.comment = 'Hello';

Instead of that, use setState():

// Correto
this.setState({ comment: 'Hello' });

Note that the documentation itself puts the mutation as something "wrong" and uses setState as "correct" to update the state. Basically, this happens because React needs to know when to render the component again. For this, he uses the setState, that in addition to updating the status, also agenda a new update. To learn more, check out the documentation of setState.

Therefore, the second option in your answer already becomes invalid in the world of React, since the method push Muta the array.

In short, the first option is valid. There is nothing wrong with it.

With the React Hooks, although the function setState the old API is no longer so used, the rule is still the same. For example, the hook useState gives you a function so you can modify the state instead of using it directly. The same reason applies: React needs this to know when the component should be rendered again.

  • 1

    Thank you very much for the very clear reply!

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.