function useState(initVal){
  const state = initVal 
  const setState = (newVal) => {
    state = newVal
  }

}
const [state,setState] = useState(0)
console.log(state)
TypeError: useState is not a function or its return value is not iterable
    at /home/runner/ViciousSqueakyProfessionals/index.js:8:26
    at Script.runInContext (vm.js:130:18)
    at Object.<anonymous> (/run_dir/interp.js:209:20)
    at Module._pile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)

I can't seem to figure out why i need the return value to be iterable can someone throw some light over return method in all ;-;

function useState(initVal){
  const state = initVal 
  const setState = (newVal) => {
    state = newVal
  }

}
const [state,setState] = useState(0)
console.log(state)
TypeError: useState is not a function or its return value is not iterable
    at /home/runner/ViciousSqueakyProfessionals/index.js:8:26
    at Script.runInContext (vm.js:130:18)
    at Object.<anonymous> (/run_dir/interp.js:209:20)
    at Module._pile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)

I can't seem to figure out why i need the return value to be iterable can someone throw some light over return method in all ;-;

• javascript
• reactjs
• function

2 Answers 2

As you are calling the useState function and using array destructuring on the return value of the function that is why you need you return the array first in the method itself.

You need to return values as array, Also change state to let for reassigning:

function useState(initVal){
  let state = initVal 
  const setState = (newVal) => {
    state = newVal
  }

  return [state, setState];
}

You can use these value in either ways:

const [state, setState] = useState(0);

// or
const value = useState(0);
value[0] // = state
value[1]() // = setState()

The main reason between this and the actual useState hook is that change the state value won't take ponent to rerender.

Maybe, it looks like react "useState" hook.

"useState" hook has a one arguments and return array(first one is value, second one is function - change value).

[Yours]
function useState(initVal){
  const state = initVal 
  const setState = (newVal) => {
    state = newVal
  }

}
const [state,setState] = useState(0) // error - because you are not return any.
console.log(state)

[Correct]

function useState(initVal){
  const state = initVal 
  const setState = (newVal) => {
    state = newVal
  }

  return [state, setState]

}
const resultOfUseState = useState(0);
console.log(resultOfUseState);
console.log(resultOfUseState[0]);
console.log(resultOfUseState[1]);

Maybe, you can understand!

Also, It is possible "resultOfUseState" to const [state, setState] = useState. ( resultOfUseState[0] = state, resultOfUseState[1] = setState )

It calls destructuring.