RFC: useIsolation

[Ayc0]

This RFC related to:

• useIsolation in isolation-hook and a new pattern to pass hooks to another(hook or hook creator) #168,
• useContextSelector in RFC: Context selectors #119.

This is about performance & memoization

>>> View rendered text <<<

[EECOLOR]

If I understand correctly you want the equivalent of the following:

Usage:

import React from 'react'

export function App() {
  console.log('render App')
  return (
    <IsolationProvider>
        <Test />
    </IsolationProvider>
  );
}

function Test() {
  console.log('render test')

  const x = useIsolation(() => {
    const [x, setX] = React.useState(0)
    React.useEffect(
      () => {
        let interval = setInterval(() => setX(x => x + 1), 1000)
        return () => { clearInterval(interval) }
      },
      []
    )
    return React.useMemo(() => x - (x % 2), [x])
  })

  return <p>{x}</p>
}

Non-optimized user space implementation:

const isolationContext = React.createContext(null)

function useIsolation(unsafeHook) {
  const hook = useEvent(unsafeHook)

  const [result, setResult] = React.useState(null)

  const registerHook = React.useContext(isolationContext)

  React.useEffect(
    () => registerHook({ hook, callback: (...args) => setTimeout(() => setResult(...args), 0) }),
    []
  )

  return result
}

function IsolationProvider({ children }) {
  console.log('render isolation provider')

  const [hookInfo, setHookInfo] = React.useState([])

  const registerHook = React.useCallback(
    (hookInfoToBeIsolated) => {
      setHookInfo(existing => existing.concat(hookInfoToBeIsolated))
      return function cleanup() {
        setHookInfo(existing => existing.filter(info => info !== hookInfoToBeIsolated))
      }
    },
    []
  )

  return (
    <isolationContext.Provider value={registerHook}>
      {children}
      {hookInfo.map((info, i) => 
        // key should be handled differently
        <Isolation key={i} {...{ info }} />
      )}
    </isolationContext.Provider>
  )
}

function Isolation({ info }) {
  const { callback, hook } = info
  const result = hook()

  console.log('hook executed', result)

  useCallOnChange({ ifChanged: result, callback })

  return null
}

function useCallOnChange({ ifChanged, callback }) {
  const changeRef = React.useRef(null)
  if (changeRef.current !== ifChanged) callback(ifChanged)
  changeRef.current = ifChanged
}

function useEvent(f) {
  const fRef = React.useRef(null)
  fRef.current = f

  return React.useCallback((...args) => fRef.current(...args), [])
}

[Ayc0]

If I understand correctly you want the equivalent of the following:

Yes, the idea is here with 2 differences:

• useIsolation could run synchronously during the 1st render (like a useMemo)
• you could also provide dependencies to useIsolation(hook, [deps]) to conditionally re-call the hook when its parent scope changes (but not if hooks within it would trigger a re-render)

[gaearon]

Thank you for the RFC. I wanted to note that we’ve had a very similar proposal planned except that we wanted to roll this behavior into the existing useMemo Hook.

[jaskp]

Wouldn't this concept of isolation also be useful for creating suspense boundaries around hooks?

const useSuspenseFoo = (): Foo => React.use(fooPromise)

const ComponentThatDoesNotSuspend = () => {
    const maybeFoo: Foo | undefined = React.useIsolation(() => useSuspenseFoo())
}

[Ayc0]

Wouldn't this concept of isolation also be useful for creating suspense boundaries around hooks?

const useSuspenseFoo = (): Foo => React.use(fooPromise)

const ComponentThatDoesNotSuspend = () => {
    const maybeFoo: Foo | undefined = React.useIsolation(() => useSuspenseFoo())
}

I don't know, not fully sure 🤔
Suspense boundaries need to have fallbacks. Maybe if an API like what Preact does with useErrorBoundary could work here?

Like another useSuspense() (that internally could use useIsolation() indeed), like:

const [value, isSuspensed] = useSuspense(() => useSuspenseFoo())

But I'd move this to another RFC

[Ayc0]

That said, based on the React's team direction, this RFC is highly certain to never exist.

I thought a lot about this RFC and I still think it could be awesome as:

• it gives us a lot of control on how React can work,
• allow us more fine grained detailed optimization,
• allow us to optimize 3rd party dependencies,
• and in conjunction with RFC: auto apply useIsolation via the compiler #261, pairs well with the Compiler

But, based on how the compiler auto optimizes things, and based on the fact we can now do use(Context), if someone would use the compiler and do something like:

const Foo = () => {
  const foo = React.useContext(CustomHeavyContext).foo;
};

or

const Bar = () => {
  const bar = useSearchParams().get("bar");
};

then the variables foo & bar would be memoized deeply. And even if Foo & Bar would auto-re-render when any of the context / search params would change, no other variable using foo nor bar would change, and neither would children of Foo & Bar. So maybe we don't need this RFC anymore with the compiler.

[NotYoojun]

So maybe we don't need this RFC anymore with the compiler.

I really appreciate the idea of rolling this behavior into useMemo, but I want to emphasize that not everyone will be using (or be able to use) the React compiler or relying on compiler-driven optimizations. Having useIsolation as a dedicated hook provides a clear, explicit API that developers can adopt regardless of their tooling setup.

So while I understand the motivation to unify this into useMemo, I strongly agree that useIsolation should be added as its own hook. Having it as a dedicated hook provides flexibility for developers who prefer explicit APIs, and ensures we retain control over when and how isolation is applied.

[Ayc0]

@NotYoojun I agree with you: a lot of companies can't use the compiler as it's babel based (and thus too slow in their build pipelines).

Also idk if unification with useMemo I think was shipped and instead if they aren't pushing for the compiler more 🤔 (I need to check again in the docs)

[NotYoojun]

Also idk if unification with useMemo I think was shipped and instead if they aren't pushing for the compiler more 🤔 (I need to check again in the docs)

Currently useMemo does not support calling hooks inside, right? As far as I can remeber calling a hook in useMemo will result in a invalid hook call error, neither the React documentation mentioned anything about that

[NotYoojun]

I do believe the implementation of useIsolation can resolve a massive amount of React performance issue, as well as making useContextSelector possible and flexible. We do have a userland useContextSelector by dai-shi. However, it is just simulating the behavior. The data flow is still updated async-ly (using useLayouEffect), thus not a real solution.

The community has been expecting this for a while: https://x.com/TkDodo/status/1741193371283026422.

However, I do understand that implementation requires a certain amount of effort (and probably even massive refactoring), so I really appreciate all your effort.