jaeyoung-kwon

jaeyoung-kwon

const B = ({ name }: Props) => {
  if (name === '권씨') {
    return <div>{expensiveCalculation(name)}</div>;
  } else if (name === '오씨') {
    return <div>{expensiveCalculation(name)}</div>;
  } else {
    return <div>{expensiveCalculation(name)}</div>;
  }
};

jaeyoung-kwon

type Props = {
  name: '권씨' | '오씨' | '박씨';
};

const A = ({ name }: Props) => {
  return <div>{expensiveCalculation(name)}</div>;
};

jaeyoung-kwon

function App(t0) {
  const $ = _c(4);
  const { name } = t0;
  console.log("Rendering..."); // 최적화에서 제외
  // ...
}

jaeyoung-kwon

function App({ show }: { show: boolean }) {
  if (show) {
    const [count, setCount] = useState(0); // 조건부 훅 호출
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
  }
  return <div>숨겨짐</div>;
}

jaeyoung-kwon

function App({ name }: { name: string }) {
  console.log('Rendering...'); // 사이드 이펙트
  return <div>{expensiveCalculation(name)}</div>;
}

jaeyoung-kwon

function App({ user }: { user: { name: string } }) {
  user.name = user.name.toUpperCase(); // mutation
  return <div>{user.name}</div>;
}

jaeyoung-kwon

import { c as _c } from "react/compiler-runtime";

const App = (t0) => {
  const $ = _c(4);
  const { name } = t0;
  
  let t1;
  if ($[0] !== name) {
    t1 = expensiveCalculation(name);
    $[0] = name;

jaeyoung-kwon

function App({ name }: { name: string }) {
  return <div>{expensiveCalculation(name)}</div>;
}

jaeyoung-kwon

import { use } from 'react';

export default function ThemeProvider(props) {
  if (!props.children) {
    return null;
  }
  // 조건부 반환 이후의 코드도 자동으로 메모이제이션
  const theme = mergeTheme(props.theme, use(ThemeContext));
  return (
    <ThemeContext value={theme}>