Please how can I make the useState method update the variable after the function and the variable to be set are already called?

Question

I'm trying to implement useState hook of reactjs. I think the variable is popped off the stack(execution context and stack) and so the function could not access it after execution. I'm not sure.
https://code.sololearn.com/c77le7DR0ekL/?ref=app

Answer 1

you doesn't really need a class to implement react useState... a simple function is enough ^^

however, you need to return an object (instead of a value) as first array item... with a valueOf method wich return the initial value: so you need to use it in a context wich call implicitly the valueOf method of the object to get the state value... as adding it to another primitive value (string, number...)

in a react context, the use of the object is implicitly done through the valueOf function (implicit string concatenation) ;)

https://code.sololearn.com/cI0bL48k1t11/?ref=app

Answer 2

(JAM) ‎جوردن آهو ماولی‎
it seems that at least sololearn console implementation doesn't log to you the methods of an instance...

I don't know how a standalone version of NodeJS is supposed to handle log of an instance, but console implementation of most of browser let you see the methods (even if accessed through the prototype of the instance/class)...

The fact is that methods of React class are stored in prototype object of the constructor method... that is React.prototype for syntactic sugar classes or instance.__proto__ ^^

So, you can log this.__proto__ own property names list to see that React methods are accessibles from 'this' object (console.log is an unbound method, so you can use 'null' as thisArg, else you must use 'console'):

console.log.bind(null,Object.getOwnPropertyNames(this.__proto__))

if you want to log 'this' at time of calling you must use:

(function logThis() {
console.log(Object.getOwnPropertyNames(this.__proto__));
}).bind(this)

...both in your return statement of 'useState'

Answer 3

Mehran not a noticeable performance drop in most of case (it's just recommended to not have a very long prototype chain), and that's widely preferable to store methods in prototype rather than in instances... all the more if you create the methods in the instance constructor (more use of memory) ^^

A middle way would be to declare methods outside of constructor and store only a reference to them in the instance constructor... but using the prototype chain would be more clear/clean... all the more when using the 'class' syntactic sugar ;P

Answer 4

because you update the object (new React) property... not the returned value (wich is a copy of the object property at time of return)...

mine use closure (function scope) to store an object wich read the value at time of use (through the valueOf function), and update that value (through the setInitial function defined in the useState scope)

Answer 5

visph. i have this question for a long time. Doesn't that cause a drop in performance that classes store methods in the prototype?!
because when we call method, engine search for it in its properties then search in class.prototype.

Answer 6

visph ahaa 😄 😄 😄 😄. It worked. So it looked down the prototype chain of React to find the methods 😄😄😄. Thanks soo much Visph!
https://code.sololearn.com/cF3hHeuRcCsG/?ref=app

Answer 7

visph yeah I used arrow function because I was controlling the reference of "this" with bind outside the IIFE. (Immediately invoked function expression). Because as we know normally arrow functions' "this" is not the enclosing object. Yeah.

Answer 8

visph oh I see. I get it now! Yeah. Thanks bro ☺️ ☺️ ☺️ ☺️ ☺️

Answer 9

visph amazing bro. I've learned a lot from you 😄😄😄😄😄😄😁😁😁😁😁

Answer 10

visph yes yes. I'm familiar with this method 😄😄😄😄. I used to use it with event listeners to get a reference to the "this" outside the listener. But now I use an arrow function if I want the "this" outside the listener, since "this" inside the listener with a regular function refers to the currentTarget. 😁😁😁

Answer 11

visph YES!!! Perfectly understood 😄😄😄😄😄😄. I love this 😁

Answer 12

visph I found this and I think it may be useful to you ☺️. On js architecture. https://gist.github.com/rossta/8582167 by Zackas and Osmani

Answer 13

visph aha I see 😀. Cool. Thanks a lot bro. You're amazing and helpful ☺️☺️☺️☺️

Answer 14

yes, I see...
because you return the value without converting it to explicitly to string inside toString method ^^
but the toString method is supposed to return a string: you could return anything from it, but it would be more logical to return a string:

toString: () => ""+initial;

and to use valueOf() if you want to return any type ;P

Answer 15

https://code.sololearn.com/cs0kJI09Fxpe/?ref=app
https://code.sololearn.com/cpgr9ajWibsr/?ref=app
May you like these methods.

Answer 16

Mehran komake bozargi behem kardi dadasham. Kheili mamnoonam 😄😄😄😄. Ama, ye soale kuchik daram. How was the "this" keyword able to access the methods of the React class after being bound to the "this" of the useState method? I ask this because when I logged the "this", it referred to the React class without any methods. So how were the methods accessed? 😊
https://code.sololearn.com/cF3hHeuRcCsG/?ref=app

Answer 17

visph can you help me with why "this" made it possible to access the methods of the React class? I logged the reference for "this" and it gave me the React class without any methods. Your help is much appreciated bro. ☺️
https://code.sololearn.com/cF3hHeuRcCsG/?ref=app

Answer 18

a method is a function, with 'this' set to the target object (instance)...

bind() is a method of Function, wich set 'this' to any object...

any_function.bind(obj) return a new function with 'this' set to obj...

as you bind(this) inside React class, 'this' contains the current instance, so you return the getInitial method/function bound with the instance as 'this'...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 19

you may read:

https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/README.md

it's a wondeful free js book series...

and especially the volum:

https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/cover.jpg

wich is about the 'this' object ;)

Answer 20

visph yeah I've read the whole series. The books are amazing 😊. Kyle Simpsons