Audit use of useMemo and useCallback

[ECWireless]

• Many components already make use of useMemo and useCallback
• Do a quick sweep to ensure that these weren't misused (potentially degrading performance) anywhere, or were not applied where they should

[Jipperism]

Did a quick sweep and apart from a small number of places where useMemo() could have been used, our usage of the helper functions seems to be pretty on point. In obvious places where it was missing, I've gone ahead and added those in #484.

I do expect performance could be slightly improved by not creating inline css objects. I've generated an AI report that outlines those places by severity. If we want to pick this up, we should probably settle on a strategy for dynamically generating CSS and apply it in those places. We could use dynamic class names, clsx or one of the other solutions out there. I'll attach the report in a separate comment.

[Jipperism]

Inline Object References Inside .map() Calls

This document lists all instances where components create new object references (like css={{}}, inline styles, or callback functions) inside .map() loops. These patterns can cause unnecessary re-renders because React sees new object references on every render.

Note: In this codebase, css={{}} objects are processed by Stitches (CSS-in-JS library), which typically handles object identity efficiently through internal caching. However, large or dynamic style objects may still benefit from extraction.

---

Summary

Severity	Count	Description
🔴 High	4	Large inline css objects with many properties or dynamic values
🟡 Medium	8	Medium-sized inline css objects
🟢 Low	6	Small inline css objects or non-rendered contexts

---

High Priority (Large/Dynamic CSS Objects)

1. components/Drawer/index.tsx (lines 85-127)

{items.map((item, i) => (
  <A
    css={{
      color: asPath.split("?")[0] === item.as ? "$hiContrast" : "$neutral11",  // Dynamic!
      lineHeight: "initial",
      display: "flex",
      fontSize: "$3",
      fontWeight: 500,
      cursor: "pointer",
      alignItems: "center",
      paddingTop: "$2",
      paddingBottom: "$2",
      borderRadius: 5,
      transition: "color .3s",
      "&:hover": {
        textDecoration: "none",
        color: "$hiContrast",
        transition: "color .3s",
      },
    }}
  >
    <Flex
      css={{
        alignItems: "center",
        justifyContent: "center",
        width: 18,
        height: 18,
        marginRight: "$2",
      }}
    >

Issues:

• Large CSS object (~15 properties) created per item
• Contains dynamic value based on asPath
• Nested css object inside Flex

---

2. components/Search/index.tsx (lines 158-196)

searchMapping.map((result) => (
  <A key={result.item.id} href={`/accounts/${result.item.id}`}>
    <Flex
      css={{
        cursor: "pointer",
        borderRadius: "$2",
        fontSize: "$5",
        paddingTop: "$2",
        paddingBottom: "$2",
        paddingLeft: "$3",
        paddingRight: "$3",
        marginTop: "$1",
        marginBottom: "$1",
        backgroundColor: "$neutral3",
        justifyContent: "space-between",
        alignItems: "center",
        "&:-webkit-autofill::first-line": {
          fontSize: "$3",
        },
        "&:hover": {
          backgroundColor: "$neutral4",
        },
      }}
    >

Issues:

• Large CSS object (~14 properties) created per search result
• Search results can be numerous (up to 15 items)

---

3. layouts/account.tsx (lines 269-295)

{tabs.map((tab: TabType, i: number) => (
  <A
    css={{
      color: tab.isActive ? "$hiContrast" : "$neutral11",  // Dynamic!
      marginRight: "$4",
      paddingBottom: "$2",
      fontSize: "$3",
      fontWeight: 500,
      flex: "0 0 auto",
      whiteSpace: "nowrap",
      borderBottom: "2px solid",
      borderColor: tab.isActive ? "$primary11" : "transparent",  // Dynamic!
      "&:hover": {
        // ...
      },
    }}
  >

Issues:

• Multiple dynamic values based on tab.isActive
• Creates new object per tab on every render

---

4. components/StakeTransactions/index.tsx (lines 42-108, 118-184)

{pendingStakeTransactions.map((lock) => {
  // Expensive computation inside map!
  const newActiveSetOrder = simulateNewActiveSetOrder({...});
  const { newPosPrev, newPosNext } = getHint(...);

  return (
    <Card
      css={{
        border: "1px solid $neutral4",
        padding: "$4",
        marginBottom: "$2",
      }}
    >
      <Flex
        css={{
          width: "100%",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <Box css={{ marginBottom: "$1" }}>
        // ...
        <Flex css={{ alignItems: "center" }}>
        <Box css={{ marginLeft: "$4" }}>

Issues:

• Multiple inline CSS objects per card
• Expensive computation (simulateNewActiveSetOrder, getHint) runs per item on every render
• Same pattern repeated for completedStakeTransactions

---

Medium Priority

5. components/Table/index.tsx (lines 109-239)

{headerGroups.map((headerGroup) => (
  <Tr>
    {headerGroup.headers.map((column, i) => (
      <Th
        css={{
          paddingLeft: i === 0 ? "$2" : "auto",  // Dynamic based on index
          paddingRight: i === 0 ? "$2" : "auto",
          width: i === 0 ? "40px" : "auto",
          "@bp1": {
            paddingLeft: i === 0 ? "$5" : "auto",
            paddingRight: i === 0 ? "$5" : "auto",
          },
        }}
      >
        <Box css={{ fontSize: 11, color: "$neutral10", ... }}>

Also:

{page.map((row, i) => (
  <Tr>
    {row.cells.map((cell, i) => (
      <Td
        css={{
          fontSize: "$3",
          paddingLeft: i === 0 ? "$5" : "$1",  // Dynamic
          paddingRight: i === 0 ? "$5" : "$1",
          width: i === 0 ? "40px" : "auto",
        }}
      >

Issues:

• Nested maps with CSS objects
• Dynamic styles based on index
• Can have many rows × columns

---

6. pages/voting/index.tsx (lines 144-164)

polls.map((poll) => (
  <A
    css={{
      cursor: "pointer",
      display: "block",
      textDecoration: "none",
      "&:hover": { textDecoration: "none" },
    }}
  >
    <Card
      css={{
        padding: "$4",
        marginBottom: "$3",
        border: "1px solid $neutral4",
      }}
    >

Issues:

• Two inline CSS objects per poll
• Multiple polls can be rendered

---

7. pages/whats-new.tsx (lines 98-164)

{changeFeedData.releases.edges.map(({ node }, index1) => (
  <Card
    css={{
      border: "1px solid $neutral4",
      flex: 1,
      marginBottom: "$5",
      padding: "$4",
    }}
  >
    <Box css={{ lineHeight: 2, marginBottom: "$3", fontSize: "$2", color: "$neutral11" }}>
    // Nested maps:
    {Object.keys(groupByType(node.changes)).map((key, index2) => (
      <Box css={{ marginBottom: "$3" }}>
        {groupByType(node.changes)[key].map((change, index3) => (
          <Box as="ul" css={{ paddingLeft: 20, alignSelf: "flexStart" }}>
            <Box as="li" css={{ marginBottom: "$3", lineHeight: 1.5 }}>

Issues:

• Triple-nested maps with inline CSS
• groupByType(node.changes) called multiple times per item

---

8. pages/treasury/[proposal].tsx (lines 418-438)

{actions?.map((action, idx) => (
  <Box
    css={{
      borderBottom: idx + 1 < proposal.targets.length
        ? "1px solid $neutral4"
        : "",  // Dynamic based on index
    }}
  >
    <Flex css={{ paddingLeft: "$2", marginBottom: "0.2em" }}>

Issues:

• Dynamic CSS based on index comparison

---

9. layouts/main.tsx (lines 837-857)

.map((key) => (
  <Flex key={key}>
    <Text
      css={{
        marginBottom: "$1",
      }}
    >
    <A
      css={{
        marginLeft: "auto",
        marginBottom: "$1",
      }}
    >

Issues:

• Multiple inline CSS objects per contract key

---

10. components/ThreeBoxSteps/index.tsx (lines 26-32)

{steps.map((label) => (
  <Step key={label}>
    <Box as={StepLabel} css={{ fontFamily: "$primary" }}>

Issues:

• Small CSS object, but created per step

---

11. pages/migrate/orchestrator.tsx (lines 734-752)

{signingSteps.map((step, index) => (
  <Step key={`step-${index}`}>
    <Box
      as={StepLabel}
      optional={
        index === 2 ? (
          <Text variant="neutral" size="1">
            Last step
          </Text>
        ) : null
      }
    >

Issues:

• Inline conditional object creation for optional prop

---

12. pages/migrate/delegator/index.tsx (lines 753-773)

Similar to orchestrator.tsx above.

---

Low Priority (Small Objects / Non-Critical)

13. components/ProgressSteps/index.tsx (lines 73-80)

{steps.map((step, i) => (
  <CircleRow key={i}>
    <Circle {...{ confirmed: step }}>{step ? "✓" : i + 1}</Circle>

Issues:

• Small inline object { confirmed: step } spread as props
• Minimal impact due to small list size

---

14. components/PerformanceListSelector/index.tsx (lines 137-146)

{availPipelines?.pipelines?.map((p, pindex) =>
  p.models?.map((m, mindex) => (
    <Box as="option" key={`${p.id}-${m}`} value={`${pindex},${mindex}`}>

Issues:

• Nested maps but no inline objects (clean pattern)

---

15. pages/leaderboard.tsx (lines 151-157)

{
  availableRegions.map((region) => (
    <Box as="option" key={region.id} value={region.id}>
      {region.name}
    </Box>
  ));
}

Issues:

• No inline objects (clean pattern)

---

16. pages/treasury/index.tsx (lines 107-114)

{
  proposals?.map((prop) => (
    <TreasuryProposalRow
      key={prop.id}
      proposal={prop}
      currentRound={currentRound}
      protocol={protocol.data?.protocol}
    />
  ));
}

Issues:

• No inline objects (clean pattern - delegates to child component)

---

17. components/HistoryView/index.tsx (line 139)

{
  mergedEvents.map((event, i: number) => renderSwitch(event, i));
}

Issues:

• No inline objects in map itself (clean pattern - delegates to function)

---

18. Data transformation maps (non-rendered)

Several files use .map() for data transformation, not rendering:

• pages/treasury/[proposal].tsx line 102 (useMemo)
• pages/voting/index.tsx line 57 (Promise.all)
• pages/treasury/index.tsx line 28 (useMemo)
• pages/leaderboard.tsx line 224 (getStaticProps)
• pages/migrate/delegator/index.tsx lines 441, 456, 465 (data mapping)

These are not performance concerns as they don't create React elements.

---

Recommendations

Immediate Actions (High Priority)

1. components/StakeTransactions/index.tsx

   • Memoize simulateNewActiveSetOrder and getHint results per lock
   • Extract static CSS objects outside component

2. components/Drawer/index.tsx

   • Extract static styles to a const outside component
   • Use conditional className instead of dynamic CSS values

3. layouts/account.tsx

   • Create separate styled components for active/inactive tab states

Medium-Term Improvements

4. components/Table/index.tsx

   • Consider extracting cell/header components with memoized styles
   • Use CSS classes for index-based styling instead of inline objects

5. components/Search/index.tsx

   • Extract search result item to a separate memoized component

Best Practices Going Forward

• Extract large static CSS objects to const declarations outside components
• Use conditional classNames or CSS variants instead of dynamic object values
• For index-based styling, prefer CSS pseudo-selectors (:first-child, :nth-child)
• Wrap expensive computations inside .map() with useMemo when appropriate
• Consider extracting repeated list items into separate React.memo components

---

Report generated: January 2026

[ECWireless]

Closed by #484