Compatibility with upcoming react compiler

[keithkraker]

Hello, I came across your library while looking for a class-based store implementation and have been playing with it a bit. It seems really cool!

I noticed that when I have the experimental React compiler enabled, some of the actions no longer cause re-renders. The store is updated underneath, but it's not reflected in the UI. I tried creating a custom useStore hook using useSyncExternalStore, but had no luck getting it to work.

Do you know what it would take to make this library compatible with the React compiler? Are there any plans to do this, or is it impossible to be compatible, kind of like how MobX seems to be?

[Marcisbee]

Hey! Glad to hear you like it.
I've tried to use it with compiler, but it seems like it doesn't play nice with exome, just like mobx.

I plan to however revisit this in coming days to either make it work of mark it as "not compatible".

[keithkraker]

Hope you can work some magic and make it compatible! Looking forward to see what you find out.

[keithkraker]

This seems to work but it requires a Proxy:

import { type Exome, subscribe } from "exome"
import { useCallback, useRef, useSyncExternalStore } from "react"

export const useStore = <T extends Exome>(store: T): Readonly<T> => {
  const snapshotRef = useRef<Readonly<T>>(createProxy(store))

  const subscribeCallback = useCallback(
    (onChange: () => void) => {
      return subscribe(store, () => {
        snapshotRef.current = createProxy(store)
        onChange()
      })
    },
    [store],
  )

  const getSnapshot = () => snapshotRef.current

  return useSyncExternalStore(subscribeCallback, getSnapshot, getSnapshot)
}

function createProxy<T extends object>(obj: T): Readonly<T> {
  const isSetOrMap = obj instanceof Set || obj instanceof Map

  return new Proxy(obj, {
    get(target: T, prop: string | symbol) {
      const value = Reflect.get(target, prop)
      if (typeof value === "function") {
        if (
          isSetOrMap &&
          ["add", "set", "delete", "clear"].includes(prop as string)
        ) {
          return () => false
        }
        return value.bind(target)
      }
      return typeof value === "object" && value !== null
        ? createProxy(value)
        : value
    },
    set() {
      return false
    },
  })
}

[keithkraker]

One thing I haven't been able to figure out, however, is how to have the parent store subscription trigger an update when a nested Exome store is updated. It looks like that isn't supported in the current functionality of Exome. It would be nice to be able to do something like this and the changing of the name would trigger a re-render as well.

import { Exome } from "exome"
import { useStore } from "exome/react"

class User extends Exome {
  constructor(public name: string) {
    super()
  }

  changeName(name: string) {
    this.name = name
  }
}

class UserStore extends Exome {
  users = Array<User>()

  addUser(user: User) {
    this.users.push(user)
  }
}

const userStore = new UserStore()

export function App() {
  const store = useStore(userStore)

  const handleAddUser = () => {
    const user = new User("John")
    store.addUser(user)

    // Simulate name change after 3 seconds
    // Note: This update won't trigger a re-render in current Exome implementation
    setTimeout(() => {
      user.changeName("Jane")
    }, 3000)
  }

  return (
    <>
      <button onClick={handleAddUser}>Add user</button>
      <ul>
        {store.users.map((user, index) => (
          <li key={index}>{user.name}</li>
        ))}
      </ul>
    </>
  )
}

[Marcisbee]

I was thinking about this. But I think current implementation forces dev to make code more optimized. In your example each update and both actions will trigger re-render of the whole component and list every time.

Current implementation would force you to write it like so:

import { Exome, getExomeId } from "exome"
import { useStore } from "exome/react"

class User extends Exome {
  constructor(public name: string) {
    super()
  }

  changeName(name: string) {
    this.name = name
  }
}

class UserStore extends Exome {
  users = Array<User>()

  addUser(user: User) {
    this.users.push(user)
  }
}

const userStore = new UserStore()

export function App() {
  const store = useStore(userStore)

  const handleAddUser = () => {
    const user = new User("John")
    store.addUser(user)

    // Simulate name change after 3 seconds
    // Note: This update won't trigger a re-render in current Exome implementation
    setTimeout(() => {
      user.changeName("Jane")
    }, 3000)
  }

  return (
    <>
      <button onClick={handleAddUser}>Add user</button>
      <ul>
        {store.users.map((user) => (
          <UserItem key={getExomeId(user)} user={user} />
        ))}
      </ul>
    </>
  )
}

function UserItem({ user }: { user: User }) {
  const { name } = useStore(user)

  return (
    <li>{name}</li>
  )
}

This way rename action would only trigger update in User component that actually changed. It's more performant and granural.

You could also do something like this, if previous answer doesn't feel ok:

import { type Exome, getExomeId, subscribe } from 'exome';
import { useLayoutEffect, useState } from 'react';

function useStoreList<T extends Exome[]>(stores: T): Readonly<T> {
  const [, change] = useState(0);
  const ids = stores.map(getExomeId);

  function render() {
    change((a) => a + 1);
  }

  useLayoutEffect(() => {
    const subscriptions = stores.map((storeItem) => subscribe(storeItem, render));

    return () => {
      for (const unsubscribe of subscriptions) {
        unsubscribe();
      }
    };
  }, [ids.join(',')]);

  return stores;
}

...
export function App() {
  const store = useStore(userStore)
  useStoreList(store.users)
...

This will re-render your component on every UserStore and child User action.

[keithkraker]

Yeah, good point. Thank you for the explanation and examples!