Dan asked me to open up an issue: https://twitter.com/dan_abramov/status/1246883821477339139

My proposal is to extend React with a small hook that allows us to mutate nodes without causing render. React has no official means to deal with fast occurring updates and libraries like react-spring and framer-motion already do something similar but in a way that forces them to carry a lot of burden.

import React, { useMutation }

function A() {
  const [specialRef, set] = useMutation()

  useEffect(() => {
    // the following would execute sync and without causing render
    // going through the same channel as a regular props update with all
    // the internal interpolation (100 --> "100px")
    set({ style: { left: 100 } })
  }, [])

  return <div ref={specialRef} ... />

It uses the fact that reconcilers know how to handle props, something we don't know in userland unless we cause render to set fresh props, which is not at all optimal for animation or anything frame based. react-dom for instance knows what margin: 3px is, react-three-fiber knows what position: [1,2,3] is, and so on. These details are defined in the reconciler:

  commitUpdate(instance: any, updatePayload: any, type: string, oldProps: any, newProps: any, fiber: Reconciler.Fiber)

If libraries could use this knowledge from outside they could deal with any platform. Animation libraries like react-spring or framer-motion would turn x-platform in one strike, they could animate everything: dom nodes, react native views, meshes, hardware diodes. We could finally write libraries that are not reliant on platforms.