Theo's Typesafe Cult•4mo ago

Really dumb question about React Compiler

I figure this is a question someone deeper into the React ecosystem can answer. I've read some of what the React Compiler can do, but I'm not quite grokking it. Does React Compiler simply run through JavaScript and React code and improve its performance? Or can it be used to compile React code in such a way that it can be run standalone? As in, does it compile, optimize, and minify the code in such a way that I can run it on another application without that application running an instance of react and react-dom?

Solution:

the compiler adds memoization (remove unnecessary rerenders) from react

Jump to solution

5 Replies

Solution

Neto•4mo ago

the compiler adds memoization (remove unnecessary rerenders) from react

Neto•4mo ago

or at least does the best it can

$ cd ./villard•4mo ago

Ah, okay. So not as deep as what I had in mind. Got it.

$ cd ./villard•4mo ago

That's still definitely useful, I was wondering if it could be used for a common global component used across applications using different frameworks in the same way web components are used.

Neto•4mo ago

take a component like this:

export default function MyApp() {
  const [value, setValue] = React.useState(1);

  return (
    <>
      <Component1 counter={value} />
      <Component2 add={() => setValue(value + 1)} />
      <Component3 />
    </>
  );
}

function Component1(props) {
  console.log('rendered Component1');
  return (
    <div>
      <span>Counter: {props.counter}</span>
    </div>
  );
}

function Component2(props) {
  console.log('rendered Component2');
  return (
    <div>
      <button onClick={() => props.add()}>Add to counter</button>
    </div>
  );
}

function Component3() {
  console.log('rendered Component3');
  return (
    <div>
      <span>I do nothing</span>
    </div>
  );
}

export default function MyApp() {
  const [value, setValue] = React.useState(1);

  return (
    <>
      <Component1 counter={value} />
      <Component2 add={() => setValue(value + 1)} />
      <Component3 />
    </>
  );
}

function Component1(props) {
  console.log('rendered Component1');
  return (
    <div>
      <span>Counter: {props.counter}</span>
    </div>
  );
}

function Component2(props) {
  console.log('rendered Component2');
  return (
    <div>
      <button onClick={() => props.add()}>Add to counter</button>
    </div>
  );
}

function Component3() {
  console.log('rendered Component3');
  return (
    <div>
      <span>I do nothing</span>
    </div>
  );
}

it will log something like this, after each click, the same logs will appear rendered Component1 rendered Component1 rendered Component2 rendered Component2 rendered Component3 rendered Component3 the same exact react code, after the compiler ------------------ rendered Component1 rendered Component2 rendered Component3 :click: rendered Component1 rendered Component2 --------------- nothing added, and its already faster you code reduce the rerendering by changing

- <Component2 add={() => setValue(value + 1)} />
+ <Component2 add={() => setValue((v) => v + 1)} />

- <Component2 add={() => setValue(value + 1)} />
+ <Component2 add={() => setValue((v) => v + 1)} />

now only component 1 will rerender after the click

Gaming

Programming

Really dumb question about React Compiler