Compatibility with React Compiler

[sofi-manomano]

I am currently using React Compiler in my app, which automatically handles the useCallback, useMemo and memo optimisations. However, the rule react-perf/jsx-no-new-function-as-prop is complaining when I am not wrapping with a useCallback, the functions declared within a component. So, for example, in the following component:

export const Accordion = ({ children, title }: AccordionProps) => {
  const [isCollapsed, setCollapsed] = useState(true);
  const toggle = useCallback(() => setCollapsed((prev) => !prev), []);  <--------------- HERE

  return (
    <View>
      <Pressable onPress={toggle} style={[styles.header, !isCollapsed && styles.headerOpen]}>
          <Text>{title}</Typography>
      </Pressable>

      <View style={[styles.content, isCollapsed && styles.collapsed]}>
        {children}
      </View>
    </View>
  );
};

I would like to have the rule detect this is wrong:

<Pressable onPress={() => setCollapsed((prev) => !prev)}>

And to make me declare the function outside the JSX, like this:

const toggle = () => setCollapsed((prev) => !prev);
<Pressable onPress={toggle}>

But not have to wrap it with the unnecessary useCallback, since I have React Compiler configurated. So my request is, could you add a custom config for the rule to avoid creating functions within the render, but not require the use of useCallback?

[hilja]

Some observations after playing in the React Compiler playground.

Inline function prop:

const list = ['foo', 'bar', 'baz']
export default function MyApp() {
  const [foo, setFoo] = useState(false)

  return list.map(item => {
    console.log(foo)
    return <button onClick={() => setFoo(prev => !prev)}>{item}</button>
  })
}

Turns into this:

import { c as _c } from "react/compiler-runtime";
const list = ["foo", "bar", "baz"];
export default function MyApp() {
  const $ = _c(2);
  const [foo, setFoo] = useState(false);
  let t0;
  if ($[0] !== foo) {
    t0 = list.map((item) => {
      console.log(foo);
      return <button onClick={() => setFoo(_temp)}>{item}</button>;
    });
    $[0] = foo;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  return t0;
}
function _temp(prev) {
  return !prev;
}

And the outside function prop:

const list = ['foo', 'bar', 'baz']
export default function MyApp() {
  const [foo, setFoo] = useState(false)
  const toggle = () => setFoo(prev => !prev)

  return list.map(item => {
    // Comment this out to see a change
    console.log(foo)
    return <button onClick={toggle}>{item}</button>
  })
}

Turns into this if you use foo inside the loop:

import { c as _c } from "react/compiler-runtime";
const list = ["foo", "bar", "baz"];
export default function MyApp() {
  const $ = _c(3);
  const [foo, setFoo] = useState(false);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = () => setFoo(_temp);
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  const toggle = t0;
  let t1;
  if ($[1] !== foo) {
    t1 = list.map((item) => {
      console.log(foo);
      return <button onClick={toggle}>{item}</button>;
    });
    $[1] = foo;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  return t1;
}
function _temp(prev) {
  return !prev;
}

The outside toggle is a bit larger (about 34%) because it does two memoizations. But the toggle function is not invoked on every iteration.

• Outside toggle (minified): 852 bytes
• Inline toggle (minified): 605 bytes

Your app wont be 34% larger for sure, maybe few percentages max. Nothing to worry about.