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 };
} 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 };
} 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 };
} 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 };
} 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 };
} 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 };
} 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

SIgnalium

A new take on reactivity in React