TTC
Theo's Typesafe Cult•9mo ago
$ cd ./villard

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
Neto•9mo ago
the compiler adds memoization (remove unnecessary rerenders) from react
Neto
Neto•9mo ago
or at least does the best it can
$ cd ./villard
$ cd ./villardOP•9mo ago
Ah, okay. So not as deep as what I had in mind. Got it.
$ cd ./villard
$ cd ./villardOP•9mo 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
Neto•9mo 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

Did you find this page helpful?