3 ms·
``` The quickest obstacle you’ll run into as someone new to React will be something like this function MyComponent() { const [num, setNumber] = useState(42
by activitypea 4y ago
```
The quickest obstacle you’ll run into as someone new to React will be something like this
function MyComponent() {
const [num, setNumber] = useState(42);
// infinite loop
setNumber(n => n + 1);
return <div>{num}</div>
}
Trying to make state updates at the top level of a component will result in an infinite loop.
```
I've taught React to dozens of people without ever seeing someone try this. A render function is an idempotent function that produces UI for a given state, and it's called every time the state changes. What are you, semantically, trying to do by updating state midway through a render function? This isn't a footgun, this is the author picking up a screwdriver and going "I wonder what happens if I press it against my eyeball"
- pas 4y agoThis is because people forget that React is still a only "view" library with the M and C sprinkled all over with meathooks. ¯\_(ツ)_/¯
- activitypea 4y agoReact doesn't map to the MVC paradigm at all, though.
- zelphirkalt 4y agoI like the mental picture of the comparison. Consider, that you might have taught a boased selection of people, and that others might not be so diligent to have read the docs and actually thought about it in depth to also understand it ; )
- activitypea 4y agoThe idea of pure functions deriving UI from state is the single central idea of React's worldview. The docs work extra hard to get this model of apps into your brain. This is not the same thing as people being elitist about Git, this is refusing to engage with the design of the framework and blaming the framework. I like how you say "others might not be so diligent to have read the docs"... As opposed to? Picking up a UI framework and just winging your way through LSP autocompletions until something happens on your screen?
- zelphirkalt 4y ago> As opposed to? Picking up a UI framework and just winging your way through LSP autocompletions until something happens on your screen? Yes, that, and following bad tutorials by other people who did the same.
- patdx 4y agoThat’s a good point, that example does feel a bit contrived. Interestingly though it is actually “canon” to call setState within the render function (for certain rare situations). I didn’t actually know this until I read the React beta docs: https://beta.reactjs.org/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes https://beta.reactjs.org/learn/you-might-not-need-an-effect#...
- activitypea 4y agoThat's a not a call to setState within the render function though, that's a declaration of an effect that sets state. Reference != call.
- satvikpendem 4y agoMost people who use React don't understand idempotency, in my experience. Without understanding that fundamental concept, and that that React will blow away the tree and recreate it (albeit efficiently), one will not understand React.
- golergka 4y agoYes, most people are idiots and most developers can't solve fizzbuzz, but that's not the problem of React.
- activitypea 4y agoI think most people can intuit it, they just don't have the FP lingo. I still don't understand what a newcomer would expect that piece of code to do.