Skip to content

Bug: Compiler, group memoisation #35239

@Grafikart

Description

@Grafikart

The compiler seems to mix dependency in some condition and nest block incorrectly.

React version: 19.2
Issue demo : React Compiler Playground

Steps To Reproduce

  1. I create a component with 2 states that won't interact, and array and a counter (React Compiler Playground Link)
export default function MyApp() {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState([1, 2, 3, 4, 5])

  const filteredItems = items.filter(v => v%2 === 0)

  const increment = () => {
    setCount(v => v+1)
  }

  const addItem = () => {
    setItems(v => [...v, v.length + 1])
  }


  return <div>
    <p>Compteur {count}</p>
    <button onClick={increment}>Incrémenter</button>
    <ul>
      {filteredItems.map(item => <li key={item}>{item}</li>)}
      <button onClick={addItem}>Add Item</button>
    </ul>
  </div>
}
  1. I would expect filteredItem to be memoised with "items" as a dependency. But it produce this code
// Compiler output
  if ($[1] !== count || $[2] !== items) {
    const filteredItems = items.filter(_temp);
    let t5;
    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
      t5 = () => {
        setCount(_temp2);
      };
      $[7] = t5;
    } else {
      t5 = $[7];
    }

let t2
// Expected output
  if ($[1] !== items) {
    t2 = items.filter(_temp);
    $[1] = items
    $[2] = filteredItems
    } else {
      t2= $[2];
    }

The current behavior

It groups everything after the filteredItems inside a condition

The expected behavior

  • filteredItems should be memoised
  • The 3 children of the virtual dom should be in their own condition with the right dependency

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions