4 ms·
The first one just feels like a premature optimization. Yes calling setCount forces a rerender of that component, but unless there's lots of subcomponents insid
by steinuil 6y ago
The first one just feels like a premature optimization. Yes calling setCount forces a rerender of that component, but unless there's lots of subcomponents inside that component, I wouldn't bother. Chances are later you'll need that state in the view, and if you have "unexpected side effects" from rerendering then that is the problem.
The other tips are fine; effects should have a single responsibility and links and buttons should be accessible.
- duxup 6y agoYeah I felt the same way about the first one. Yeah we're preventing re-renders there but what are we really preventing / saving, nothing significant? Anytime I run into a situation where I didn't like how / when a component was re-rendering, it absolutely was not because there was a random bit of state like a counter was in state that didn't need to be... usually it was just a more complex situation unfolding. It's a good illustrative example, but not a 'common mistake' IMO.
- city41 6y agoTo add to this, the React docs state you should never rely on renders for side effects. In dev mode, React will even render your components twice to suss out any render relying side effect bugs. Your component should always work the same whether it's rendered once or rendered a million times.
- bulgr0z 6y ago> The first one just feels like a premature optimization It is in a browser context, but less with React Native which relies way more on refs. It also never hurts (imho) to explain why refs exist and why/where to use them as they can easily be abused (and often are) by devs trying to replicate OOP patterns in React.
- brlewis 6y agoYes. The author should replace "This is dangerous" with "This is a tiny bit sub-optimal" in the first example. EDIT: "This is dangerous" is also the wrong label for the 2nd example. Should be "This is not the cleanest way" EDIT2: "This is dangerous" is also the wrong label for the 3rd example. Should be "This is not the most readable". I'd also note that I'm surprised the author has seen this mistake a lot; the "solution" looks like the happy path most people would follow in the first place. EDIT3: "This is dangerous" in the 4th example should be replaced with "This could be simplified" EDIT4: "This is dangerous" in the 5th example should be "This makes redundant API calls". I'd also note that I'm surprised this example is even included. How could anyone miss that fetchData() is being called every time updateBreadcrumbs() is called?
- Kiro 6y agoI have a really large chat app with thousands of users and I realized the other day that I accidentally re-render the root component on _every keystroke_. Still, it's not a disaster and I haven't bothered to fix it because no-one notices.
- steinuil 6y agoShouldn't be a big deal if it's properly split into subcomponents and their props don't change with every rerender as well.