idiomatic way to write a 'join'?

[vilterp]

Hi, I'm new to Solid and feel like I'm not thinking about this right. Thanks!

Setup

Let's say I'm making a 'leaderboard' for companies with the highest market cap.

I have two stores:

type Company = { ticker: string; numShares: number }

// Create the store outside of any component
const [companies, setCompanies] = createStore({
  AAPL: { ticker: "AAPL", numShares: 1000 },
  MSFT: { ticker: "MSFT", numShares: 2000 },
});

const [stockPrices, setStockPrices] = createStore({
  AAPL: 150,
  MSFT: 250,
});

I have a function which computes the market cap of each company:

type CompanyMarketCap = { company: Company; marketCap: number }

function getMarketCaps(): CompanyMarketCap[] {
  // 'join' between companies & share prices
  return Object.keys(companies).map((ticker) => {
    const company = companies[ticker];
    const stockPrice = stockPrices[ticker];
    const marketCap = company.numShares * stockPrice;
    // PROBLEM: new object created here, breaking `For`'s referential equality check
    return {
      company,
      marketCap,
    };
  });
}

And I have one view:

function ViewMarketCaps() {
  const marketCap = getMarketCaps();
  
  return (
    <For each={marketCap}>
      <div>
        <p>Ticker: {marketCap.company.ticker}</p>
        <p>Market cap: {marketCap.marketCap}</p>
        <ExpensiveWidget marketCap={marketCap} />
      </div>
    </For>
  )
}

And I have events arriving over a web socket, which could either

• update the list of companies (e.g. adding a new company)
• or update the stock price for a company

When these arrive, I'm updating the relevant store.

Question

How can I do this without ExpensiveWidget being re-rendered every time I recieve an event over my socket? E.g. if it's some non-Solid chart widget that has lots of internal state?

What happens now seems to be:

1. Event received
2. One of the two stores is updated
3. ViewMarketCaps rerenders
4. getMarketCaps runs again; It does its 'join' between companies and share prices
5. Every object returned is new; causing For to re-render each of its children because it does referential equality
6. ExpensiveComponent of each child rerenders, causing my UI to flicker and state to be lost

Possible Solutions I Can See

1. Consolidate into one store: have one store for market caps, instead of separate ones for companies and share prices.
   • Then, we wouldn't need to do a join which creates new objects.
   • I'd prefer to keep my data 'normalized' in stores until rendering, so that responsibility is cleanly separated between (a) the code that receives the events and updates the stores, and (b) the code that renders stuff based on what the user is looking at.
   • However, if this is what's needed, I think I can do it.
2. Use Keyed: don't worry about maintaining referential equality; just try to use keys to prevent rerendering

I think for me, the root issue is that in React (where I'm coming from), it's cool to write functions to do arbitrary data transformations, and then have components like

<div>
  {foo.map((item) =>
    <ChildComponent key={item.id} item={item}>
  )}
<div>

where React will match components and data up by key, and ChildComponent can make a determination of the extent to which it has to rerender its child components… But solid is big on in-place updates of data objects, so For blows away all child component state if the objects it's going over aren't referentially equal.

Is there an approach I'm missing? Thanks!