[FIXED] What happens in Javascript in this particular case (Call by sharing)?

Issue

Javascript uses Call by Sharing, but I have question related to something in React.

What happens when you set a state (setState Hook or Class State) inside a function? e.g:

const [myState, setMyState] = useState(null);

const foo = () => {
   const bar = {'prop': 1};
   setMyState(bar);
}

foo();

How javascript keeps track of the state value that was set inside the function, cause as far as I understand, bar dies after executing foo.

Does setState copy the passed value or am I missing something?

Solution

Values don't die. Values lie in memory, forever, as long as no one comes by and wipes them away (the garbage collector). However as long as you have a reference to that value in memory, the garbage collector won't touch it. Now bar contains a reference to the object in your case. When you call setMyState you pass over the reference, so setMyState can access the object in memory as long as the reference exist. Eventually react stores that reference somewhere, to return it to myState on the rerender.

  // A very simplified version of useState:
 let state; // the secret place were we keep the reference

 function useState(initial) {
  if(!state) state = initial;
  function setState(value) { // here we get the reference
    // food for thought: what happens to the object state referenced before here?
    state = value; // and here we store it
    render();
  }
  return [state, setState]; // here we pass on the reference to the render function
 }

 function render() {
  const [counter, setCounter] = useState({ value: 1 }); // here we get a reference to the object
  console.log(counter);
  setTimeout(() => setCounter({ value: counter.value + 1 }), 1000); // and here we pass a new one in
 }

 render();

If you would not pass on the reference, then when the execution of foo ends, no one can access bar anymore, and therefore no one can access the object lying in memory anymore, and therefore the garbage collector will eventually come by.

---

_{All of the above is a lie. There is no such a thing as a reference in JavaScript (okay, there is a Reference , but it's doing something else), also there is no such thing as memory. The values just lie around "somewhere" according to the specification. Now in practice engines do store the values in memory, therefore everything I said more or less is true for all major engines}

Answered By - Jonas Wilms

Answer Checked By - Gilberto Lyons (PHPFixing Admin)