Fre-2.1 has been pulished

#reactnative #react #fre #preact

I announce that fre2 is officially released, which is a major breakthrough version.

Offscreen rendering

The bigist breakthrough is offscreen rendering, a core algorithm refactor.

https://github.com/yisar/fre/releases/tag/2.1.0-alpha

before:

after:

Offscreen rendering is an algorithm level optimization, it traverses vdom in reverse order, from bottom to top, from right to left, to ensure that the front DOM pointer is in memory, and finally it is drawn to the screen at one time.

With off screen rendering, fre has become the best performance frameworks in vdom world, not one of.

Just as react 18 also released alpha version, fre 2.1 also tried to be compatible with them.

CreateRoot

import { render, useState } from 'fre'

function App() {
  const [count, setCount] = useState(0)
  return <>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
}

createRoot(document.body).render(<App/>) // here

This API is more ergonomic, and for the callback, you can do this:

function App({ callback }) {
  return (
    <div ref={callback}>
      <h1>Hello World</h1>
    </div>
  );
}

createRoot(document.body).render(<App callback={() => console.log("renderered")} />)

startTransiton

This is an API for lowering priority, which is very useful, so I decide to build it in.

function App() {
  const [count, setCount] = useState(0)

  console.log(count) // 1 2

  const update = () =>{
    startTransition(()=>{
      setCount(2)
    })
    setCount(1)
  }
  return <>
      <h1>{count}</h1>
      <button onClick={update}>+</button>
    </>
}