DEV Community

Discussion on: About React Suspense and Concurrent Mode

Collapse
pomber profile image
Rodrigo Pombo Author • Edited on

React Fiber refers to the new algorithm and data structures that React uses internally (since React 16.0.0). The old algorithm made implementing Concurrent Mode very difficult.

The old algorithm, sometimes called Stack Reconciliation, rendered the elements recursively. So it wasn't easy to stop it after it started rendering an element tree.

function render(element) {
  rememberToCommitToTheDom(element)

  const children = getChildren(element);
  children.forEach(child =>
    render(child)
  )
}

The new algorithm renders the element tree inside a while, so it's easier to pause and re-start later.

let nextElement

function render(element) {
  nextElement = element
  workLoop()
}

function workLoop() {
  while (nextElement && !shouldYield()) {
    rememberToCommitToTheDom(nextElement)
    nextElement = getNextElement(nextElement)
  }
}
Collapse
kambleaa007 profile image
Ashish Kamble

Introducing Concurrent Mode (Experimental) and coming in next year, why its old algorithm, i dont understand