React Hooks – What’s happening under the hood?

by

React hook makes use of hidden state of a component, it’s stored inside a fiber, a fiber is an entity that corresponds to component instance (in a broader sense, because functional components don’t create instances as class components).

It’s React renderer that gives a hook the access to respective context, state, etc. and incidentally, it’s React renderer that calls component function. So it can associate component instance with hook functions that are called inside of component function.

This snippet explains how it works:

let currentlyRenderedCompInstance;
const compStates = new Map(); // maps component instances to their states
const compInstances = new Map(); // maps component functions to instances

function useState(initialState) {
  if (!compStates.has(currentlyRenderedCompInstance))
    compStates.set(currentlyRenderedCompInstance, initialState);

  return [
    compStates.get(currentlyRenderedCompInstance) // state
    val => compStates.set(currentlyRenderedCompInstance, val) // state setter
  ];
}

function render(comp, props) {
  const compInstanceToken = Symbol('Renderer token for ' + comp.name);

  if (!compInstances.has(comp))
    compInstances.set(comp, new Set());

  compInstances.get(comp).add(compInstanceToken);

  currentlyRenderedCompInstance = compInstanceToken;

  return { 
    instance: compInstanceToken,
    children: comp(props)
  };
}

Similarly to how useState can access currently rendered component instance token through currentlyRenderedCompInstance, other built-in hooks can do this as well and maintain state for this component instance.

More Related Contents:

  1. State not updating when using React state hook within setInterval
  2. Make React useEffect hook not run on initial render
  3. Push method in React Hooks (useState)?
  4. React useEffect in depth / use of useEffect?
  5. Is useState synchronous? [duplicate]
  6. Wrong React hooks behaviour with event listener
  7. How to call loading function with React useEffect only once
  8. How to use componentWillMount() in React Hooks?
  9. Is it possible to share states between components using the useState() hook in React?
  10. react useEffect comparing objects
  11. React useState hook event handler using initial state
  12. Multiple calls to state updater from useState in component causes multiple re-renders
  13. What’s the difference between `useRef` and `createRef`?
  14. Why React Hook useState uses const and not let
  15. React useEffect causing: Can’t perform a React state update on an unmounted component
  16. How to change the value of a Context with useContext?
  17. How target DOM with react useRef in map
  18. How to programmatically clear/reset React-Select?
  19. React Hooks Error: Hooks can only be called inside the body of a function component
  20. React – useState – why setTimeout function does not have latest state value?
  21. What does useCallback/useMemo do in React?
  22. React Hooks useState+useEffect+event gives stale state
  23. How to add “refs” dynamically with react hooks?
  24. Do we still need functional setState way in react hooks?
  25. Why can’t React Hooks be called inside loops or nested function?
  26. useMemo vs. useEffect + useState
  27. TypeError dispatcher.useState is not a function when using React Hooks
  28. useState hook, setState function. Accessing previous state value
  29. Updating state to the same value directly in the component body during render causes infinite loop
  30. React Hooks render twice

Leave a Comment