4 ms·
Yes, there is something very weird indeed. Functional components are called every time they're rendered (that's not weird). But they have to maintain state betw
by bobbylarrybobby 4y ago
Yes, there is something very weird indeed. Functional components are called every time they're rendered (that's not weird). But they have to maintain state between calls; they can't start over again fresh for each call/render (still not weird). So how do they do this? `const [state, setState] = useState(initialValue)`. You might look at that and think, I see useState being called, so it must be called on each render, so state is still not being preserved between calls.
But here's the weirdness. useState knows whether it's already been called for a given component; this is how it tracks state. The first call returns the state (the initial value) and a setter. Subsequent calls -- occurring after the first render -- do not return these objects anew, but instead reach into a per-functional-component store and return the values that already exist there. Calling the setter doesn't set the state in the body; rather, it updates the value in the store, then triggers a re-render.
If you're wondering just how react knows how to match up calls to useState between renders, it doesn't really. It simply matches them up based on the order they're called in. For that reason, you have to always call exactly the same useState calls on each render -- no putting some in an if statement or a variable length for loop, otherwise they'll be out of sync.
There are a bunch of other "hooks" for use in functional components, but they all work basically the same way: place some data in the functional component's store, then set up re-render (which, again, just means calling the component's function again) to occur when certain data changes.
- divs1210 4y agoThat is bonkers, to be honest. I've used React a lot, but only via Reagent in ClojureScript. I think the JS people are being scammed.
- UlisesAC4 4y agoIt is bonkers. My number of "accidental" re renders on react are greater than before hooks. Before at least I knew what was called on boostrap moments. Now everything is run as a side effect when any dependency change. My needs on checking if a prop or a dependency has changed hasn't evolved at all. I just have the core of my side effects on useEffect.
- cutler 4y agoI don't know why Clojurescript's Reagent/re-frame aren't more popular given that they completely obviate the need for hooks or classes.
- origin_path 4y agoIt's sort of what happens when OOP is demonized for years and FP is lionized. They've created what are effectively classes but with implicitly auto-generated private property names and a lot of weird edge cases where things can go pear shaped. But hey, it's functional and 'new' so it's good, right? In fairness, the JS world has never had well engineered OOP GUI toolkits like you find in the desktop space. If you've never used JavaFX then ReactJS probably seems pretty magical. If you have, then, well ...
- divs1210 4y agoYou might need to re-read my comment. ClojureScript is a functional language. Reagent is a ClojureScript wrapper over React. Cljs + Reagent is AWESOME. There is a JavaFX wrapper too, with a similar API.
- origin_path 4y agoI know, but you didn't actually say you think React is awesome when not using JS. Given how JS specific React is, that's not a very intuitive outcome. The comment was in response to "that's bonkers". And that has been my reaction on learning stuff like React and derived frameworks. A lot of it looks like functions for the sake of it, when objects already solve those problems but became unfashionable.
- filoeleven 4y agoIt sounds bonkers, but one of the reasons I pushed for moving my company’s app to React was because the useState hook reminded me of Reagent’s ratoms. I believe that was at least part of their intent. The catch is that you can’t really enforce immutability or atomic updates in plain JS, so they built hooks into the library as a workaround. There’s not much of a cognitive difference between “defining a reagent component which uses ratoms and calls a pure function that derefs, updates or swaps them”, and “defining a react functional component that uses hooks”. It looks weird to have the “atoms” inside the render function instead of outside, and there are the aforementioned limitations (“the rules of hooks”), but it’s a compromise to get the feature into JS React in a consistent, performant manner. I’d love to use CLJS/Reagent or even go full re-frame on our front-end codebase, but that’s a hard sell at my company since I’m the only dev who’s ever played with Clojure.