3 ms·

Something that I still don't grasp with React: 1. Your render function runs quite often, e.g. on each state change. 2. But it runs a bit differently someti

by sydd 6y ago

Something that I still don't grasp with React: 1. Your render function runs quite often, e.g. on each state change. 2. But it runs a bit differently sometimes: const [a,setA] = useState(1234); Here "a" will have the value 1234 on the first run (what is a first run? When react instantiates this component? When it mounts?) Then this same line of code will assign a different value to this same variable, because setA was called in the past. Why? How does it know that this exact local variable needs a different value?

7786655 6y ago
1. When React mounts your component, it creates an object to contain its internal state, including the state of all hooks. 2. Before calling your render function, it stores a reference to that object in a private, global variable. (Global in the sense that there's only one per JS VM) (Javascript is single-threaded so this is perfectly safe to do). 3. Each of the built-in hooks has access to that variable, and use it to increment a number representing the current hook index and then store information in an array at the current index. 4. The next time your component is rendered, that information is still there and the hooks can retrieve it. 5. Also some hooks like useEffect set up functions to be called by react later.
- rashkov 6y ago
  This would make for an interesting exercise. const React = /* Implement this */ function HelloComponent(){ const [myNumber, setMyNumber] = React.useState(0); // Simulate rendering data to a screen console.log("My number:", myNumber); // Simulate rendering a clickable button const click = ()=> setMyNumber((num)=> num + 1); return click; } React.mount(HelloComponent); // prints 0 React.simulateClick(HelloComponent); // prints 1 React.simulateClick(HelloComponent); // prints 2 React.simulateClick(HelloComponent); // prints 3 General idea being that the React item may be stateful, but the HelloComponent must be a stateless pure function. How can it draw on React's statefulness, while only using that useState() call? I am working through this exercise now, but I'm already finding myself doing some pretty hacky things to make this work (like finding out who called a function using arguments.callee.caller.name). Still, it's pretty interesting. Edit: My solution to this: https://gist.github.com/rashkov/f765917d09ebd629f385c21195f42b4c https://gist.github.com/rashkov/f765917d09ebd629f385c21195f4...
  - AgentME 6y ago
    Checking the function's caller breaks the composability of hooks: it stops hooks from being called by other hooks. (Also, it doesn't work in strict mode, which is enforced when you use ES modules.) React is the only thing that calls component functions, so React can just remember what component is being called before it calls it. I've posted a reply on your gist with an example that addresses this.
    - rashkov 6y ago
      Very cool! appreciate the response, very interesting to see an improved solution on this. I was mainly interested in solving for how React lines up the useState calls with the actual data that it's keeping under the hood. So I definitely cheesed through the parts touching on how React keeps track of the component tree. I'm enjoying reading through your interpretation of this though. Thanks
etblg 6y ago
Short, potentially inaccurate: Render functions are only called when a component is being rendered. React keeps track of which component is currently being rendered. When you call `useState`, React knows which component is currently being rendered and keeps track behind the scenes which state that component has. The way it knows which value it should return for `a` ties directly in with why you need to call `useState` calls in the same order -- React basically keeps a list of the state behind the scenes, and returns the (secret behind the scenes) state in order. If you change around the order of `useState` calls, it can't use the ordering of the calls to determine which state needs to be returned.
- sydd 6y ago
  and what happens if I unmount and remount it? something like: <div> {isLoggedIn ? <LogoutButton /> : abcd } </div> and I change the value of isLoggedIn. Does the state reset? I'm not asking for a solution, just pointing out that even a 'simple' hook like useState has its small quirks.
  - acemarke 6y ago
    It does reset, because toggling that flag will unmount the old instance of the component, and then mount a new instance. This is the same behavior as has always existed with class components and `this.setState()`. Component-scoped state only exists as long as that specific instance of the component is mounted.

by sydd 6y ago

7786655 6y ago

1. When React mounts your component, it creates an object to contain its internal state, including the state of all hooks. 2. Before calling your render function, it stores a reference to that object in a private, global variable. (Global in the sense that there's only one per JS VM) (Javascript is single-threaded so this is perfectly safe to do). 3. Each of the built-in hooks has access to that variable, and use it to increment a number representing the current hook index and then store information in an array at the current index. 4. The next time your component is rendered, that information is still there and the hooks can retrieve it. 5. Also some hooks like useEffect set up functions to be called by react later.

rashkov 6y ago
This would make for an interesting exercise. const React = /* Implement this */ function HelloComponent(){ const [myNumber, setMyNumber] = React.useState(0); // Simulate rendering data to a screen console.log("My number:", myNumber); // Simulate rendering a clickable button const click = ()=> setMyNumber((num)=> num + 1); return click; } React.mount(HelloComponent); // prints 0 React.simulateClick(HelloComponent); // prints 1 React.simulateClick(HelloComponent); // prints 2 React.simulateClick(HelloComponent); // prints 3 General idea being that the React item may be stateful, but the HelloComponent must be a stateless pure function. How can it draw on React's statefulness, while only using that useState() call? I am working through this exercise now, but I'm already finding myself doing some pretty hacky things to make this work (like finding out who called a function using arguments.callee.caller.name). Still, it's pretty interesting. Edit: My solution to this: https://gist.github.com/rashkov/f765917d09ebd629f385c21195f42b4c https://gist.github.com/rashkov/f765917d09ebd629f385c21195f4...
- AgentME 6y ago
  Checking the function's caller breaks the composability of hooks: it stops hooks from being called by other hooks. (Also, it doesn't work in strict mode, which is enforced when you use ES modules.) React is the only thing that calls component functions, so React can just remember what component is being called before it calls it. I've posted a reply on your gist with an example that addresses this.
  - rashkov 6y ago
    Very cool! appreciate the response, very interesting to see an improved solution on this. I was mainly interested in solving for how React lines up the useState calls with the actual data that it's keeping under the hood. So I definitely cheesed through the parts touching on how React keeps track of the component tree. I'm enjoying reading through your interpretation of this though. Thanks

etblg 6y ago

Short, potentially inaccurate: Render functions are only called when a component is being rendered. React keeps track of which component is currently being rendered. When you call `useState`, React knows which component is currently being rendered and keeps track behind the scenes which state that component has. The way it knows which value it should return for `a` ties directly in with why you need to call `useState` calls in the same order -- React basically keeps a list of the state behind the scenes, and returns the (secret behind the scenes) state in order. If you change around the order of `useState` calls, it can't use the ordering of the calls to determine which state needs to be returned.

sydd 6y ago
and what happens if I unmount and remount it? something like: <div> {isLoggedIn ? <LogoutButton /> : abcd } </div> and I change the value of isLoggedIn. Does the state reset? I'm not asking for a solution, just pointing out that even a 'simple' hook like useState has its small quirks.
- acemarke 6y ago
  It does reset, because toggling that flag will unmount the old instance of the component, and then mount a new instance. This is the same behavior as has always existed with class components and `this.setState()`. Component-scoped state only exists as long as that specific instance of the component is mounted.