React hooks: not magic, just arrays

[TopGrd]

https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e

function Info() {
  const [name, setName] = useState('Topgrd')

  return (
    <div>
      <h2>{name}</h2>
      <input onChange={e => setName(e.target.value)} />
    </div>
  )
}

• Don’t call Hooks inside loops, conditions, or nested functions
• Only Call Hooks from React Functions

let state = [];
let setters = [];
let firstRun = true;
let cursor = 0;

function createSetter(cursor) {
  return function setterWithCursor(newVal) {
    state[cursor] = newVal;
  };
}

export function useState(initVal) {
  if (firstRun) {
    state.push(initVal);
    setters.push(createSetter(cursor));
    firstRun = false;
  }

  const setter = setters[cursor];
  const value = state[cursor];

  cursor++;
  return [value, setter];
}