SIgnalium

A new take on reactivity in React

What do we mean by reactivity?

Basic Model: Output is the result of a pure function based on state

  • Works great for initial render!
  • But, rerendering the entire app each time would be expensive
  • Also, no way to have "local" component state, async, or side effects
import './App.css'

export default function App({ count }) {
  return (
    <>
      <h1>Vite + React</h1>
      
      <div className="card">
        <button>
          count is {count}
        </button>
      </div>
    </>
  )
}

import { useState } from 'react'
import './App.css'

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

  return (
    <>
      <h1>Vite + React</h1>
      
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
    </>
  )
}

Reactive Model: Hooks

  • useState for local state
  • useEffect for side effects
  • etc etc.
import { useState, useEffect } from 'react'
import './App.css'

function useAutoCounter(ms) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const id = setInterval(() => setCount((c) => c + 1), ms);
    
    return () => clearInterval(id);
  }, [ms]);
  
  return count;
}

export default function App() {
  const count = useAutoCounter(1000);
  
  return (
    <>
      <h1>Vite + React</h1>
      
      <div className="card">
        <button>
          count is {count}
        </button>
      </div>
    </>
  )
}

Reactive Model: Hooks

  • Reactivity also applies to functions, not just components
  • Custom hooks can define and manage local state, and can setup and teardown lifecycle

Hooks are great!

  • They decouple lifecycle logic from components!
  • They allow you to manage async state and data loading!
  • They allow you to compose reactive functionality throughout the app, not just in components!

why do so many people struggle with hooks?

export default function App({ orderDetails }) {
  // Oops, should use `useCallback`!
  const handleSubmit = (orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  };
  
  // Should also useMemo for this expensive operation
  const processedOrder = process(orderDetails);
  
  return (
    <>
      <button onClick={() => handleSubmit(processedOrder)}>
      	Send Order #{processedOrder.id}
      </button>
    </>
  );
}

Example Issue 1:  Hooks are called very frequently

  • Hooks get called every time something in the component changes
  • There is no way for an individual hook to rerun on its own
  • This leads to many cases where you hooks rerun even though there's no possible way they could have changed
  • Lot's of manual dependency validation needed, and that gets complicated fast
// Make a memoized version of process order, making it easier to
// use and compose in functions
function useProcessedOrder(orderDetails) {  
  return useMemo(() => process(orderDetails), [orderDetails]);
}

function useHandleSubmit(orderDetails) {
  // Ooh! We can reuse our memoized hook here! Right?
  // Wrong, this will lead to multiple calls to process
  // even if the order details are the same
  const processedOrder = useProcessedOrder(orderDetails);

  return useCallback(() => handleSubmit(processedOrder), [processedOrder]);
}

export default function App({ orderDetails }) {
  const handleSubmit = useHandleSubmit(orderDetails);

  const processedOrder = useProcessedOrder(orderDetails);

  return (
    <>
      <button onClick={() => handleSubmit(processedOrder)}>
      	Send Order #{processedOrder.id}
      </button>
    </>
  );
}

Example Issue 2:  Hook state cannot be reused

  • Hooks are very composable by default
  • But that composability is a double edged sword, because they are not reusing state
  • If you have an expensive hook, and you call it 3 times in various places, it will run 3 times the first time
  • Subsequent runs are memo initial ones
  • All of them will also rerun if their inputs rerun
export default function Profile({ userId }) {
  const { data: user, isLoading } = useQuery(
    ['user', userId],
    () => fetchUser(userId),
    {
      enabled: !!userId,
    }
  );

  return isLoading ? (
    <p>Loading...</p>
  ) : (
    <>
      <UserAvatar user={user} />
      <UserStats user={user} />
      <UserPosts user={user} />
      <UserFollowers user={user} />
      <UserFollowing user={user} />
      <UserSettings user={user} />
      <UserNotifications user={user} />
      <UserGroups user={user} />
      <UserFeed user={user} />
    </>
  );
}

Example Issue 3:  Hooks cannot be passed around

  • In idiomatic hooks usage, there is no easy way to create state that is both local to a subtree and efficiently updates that subtree
  • In this example, we load the user and pass it into a bunch of subcomponents
  • If the user ever changes, then we need to rerender all of them
  • Even with VDOM, this is expensive and causes bugs due to complex effects and state management
  • Only general solution is a context, which is a lot of boilerplate

Root cause?

Hooks are non-monadic 

export default async function fetchUserProfileAndPosts(username) {
  const userRes = await fetchJSON(
    `/api/users/${username}`
  );

  const userProfile = await fetchJSON(
    `/api/users/${userDetails.id}/profile`
  );

  const userPosts = await fetchJSON(
    `/api/users/${userDetails.id}/posts`
  );

  return { userDetails, userProfile, userPosts };
}

What's a monad?

  • Monads are good at sequencing things.
  • Consider promises
  • Promises are monad-like (technically not a monad for reasons but very close. Futures are true monads.)
  • Promises store the current state while async happens
    • Callstack
    • Variables
    • Program counter (current line)
  • When async returns, you restore all of that state and go back to where you were before
export default async function fetchUserProfileAndPosts(username) {
  const userDetails = await fetchJSON(
    `/api/users/${username}`
  );

  const userProfile = await fetchJSON(
    `/api/users/${userDetails.id}/profile`
  );

  const userPosts = await fetchJSON(
    `/api/users/${userDetails.id}/posts`
  );

  return { userDetails, userProfile, userPosts };
}

Imagine async without promises

  • One possibility is that we simply re-execute the entire program each time
  • One possibility is that we simply re-execute the entire program each time
  • Just make sure that if a function has already been called before, you return the value it had previously

This is how hooks work!

export default async function fetchUserProfileAndPosts(username) {
  const { 
    data: userDetails,
    isLoading: userDetailsLoading,
  } = await useUserQuery(username);

  const {
    data: userProfile,
    isLoading: userProfileLoading,
  } = await useUserProfile(userDetails?.id);

  const {
    data: userPosts,
    isLoading: userPostsLoading,
  } = await useUserPosts(userDetails?.id);

  const isLoading = 
    userDetailsLoading || 
    userProfileLoading || 
    userPostsLoading;

  return { 
    userDetails, 
    userProfile, 
    userPosts,
    isLoading,
  };
}

Imagine async without promises

  • One possibility is that we simply re-execute the entire program each time
  • One possibility is that we simply re-execute the entire program each time
  • Just make sure that if a function has already been called before, you return the value it had previously

This is how hooks work!

We need a reactivity monad

Ideal design:

  • It should only re-execute when absolutely necessary
  • It should be something you can pass around and reference in multiple locations
  • It should still have the benefits of hooks
    • Composability
    • Lifecycle management
    • Easy to reuse

Signals!


const lineItems = state([
  {
    id: 1,
    name: 'Line Item 1',
    price: 100,
    quantity: 1,
  },
  {
    id: 2,
    name: 'Line Item 2',
    price: 200,
    quantity: 2,
  },
  
]);

const useTotal = computed(() => {
  return lineItems.reduce((total, item) => 
    total + item.price * item.quantity, 
    0
  );
});

export function ReceiptTotal() {
  return (
    <div>
      <p>Total: {useTotal()}</p>
    </div>
  )
}

Basic Signals

  • Signals propagate from the updated state
  • This means that components don't update unless signal state changed
  • Can be used like normal hooks anywhere
const useUserDetails = asyncComputed(async (username) => {
  return useFetchJSON(`/api/users/${username}`);
});

const useUserProfile = asyncComputed(async (userId) => {
  return useFetchJSON(`/api/users/${userId}/profile`);
});

const useUserPosts = asyncComputed(async (userId) => {
  return useFetchJSON(`/api/users/${userId}/posts`);
});

export const useUserProfileAndPosts = asyncComputed(
  async (username) => {
    const userDetails = useUserQuery(username).await();
    const userProfile = useUserProfile(userDetails.id).await();
    const userPosts = useUserPosts(userDetails.id).await();

    return { userDetails, userProfile, userPosts };
  }
);

export const useUserProfileAndPostsWithDefaults = computed((username) => {
  const { data, isPending } = useUserProfileAndPosts(username);

  if (isPending) {
    return {
      userDetails: null,
      userProfile: null,
      userPosts: null,
    };
  }

  return data;
});

Async Signals!

  • Signals have async built in
  • Can await state internally for composing
  • Automatically recompute when values change
  • Can be consumed using `isPending` state externally (like React Query!)
const useAutoCounter = subscription((state, ms) => {
  const id = setInterval(() => state.set(state.get() + 1), ms);
  
  return () => clearInterval(id);
}, { initValue: 0 })

export default function App() {
  const count = useAutoCounter(1000);
  
  return (
    <>
      <h1>Vite + React</h1>
      
      <div className="card">
        <button>
          count is {count}
        </button>
      </div>
    </>
  )
}

Subscriptions!

  • Self-contained effects within the graph
  • Externally, appears like a normal "sync" node
  • Internally, manages its own lifecycle
  • Subscribes when used by other things, unsubscribes when no more users
  • Only it can manage its own state

Fin