Reactの仮想DOM更新が遅い原因とトラブルシューティング完全ガイド

import React from 'react';

const ChildComponent = React.memo(({ count }) => {
  console.log('Child rendered');
  return <div>Count: {count}</div>;
});

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);
  const [otherState, setOtherState] = React.useState(0);

  return (
    <div>
      <ChildComponent count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setOtherState(otherState + 1)}>Change Other State</button>
    </div>
  );
};

const ExpensiveCalculation = ({ number }) => {
  const result = React.useMemo(() => {
    console.log('Calculating...');
    return number ** 2;
  }, [number]);

  return <div>Result: {result}</div>;
};

const Parent = () => {
  const [count, setCount] = React.useState(0);

  const increment = React.useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return <Child onIncrement={increment} />;
};

const ExpensiveComponent = ({ number }) => {
  const computedValue = React.useMemo(() => {
    console.log('Expensive calculation...');
    return number ** 2;
  }, [number]);

  return <div>Computed Value: {computedValue}</div>;
};

const Parent = () => {
  const [count, setCount] = React.useState(0);

  const increment = React.useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return <Child onIncrement={increment} />;
};

const Child = React.memo(({ onIncrement }) => {
  console.log('Child rendered');
  return <button onClick={onIncrement}>Increment</button>;
});

const Example = () => {
  const [count, setCount] = React.useState(0);

  const expensiveValue = React.useMemo(() => {
    console.log('Expensive calculation...');
    return count ** 2;
  }, [count]);

  const increment = React.useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return (
    <div>
      <p>Computed Value: {expensiveValue}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

import React from 'react';
import { FixedSizeList as List } from 'react-window';

const items = Array.from({ length: 10000 }, (_, index) => `Item ${index + 1}`);

const VirtualizedList = () => (
  <List
    height={400} // 表示領域の高さ
    itemCount={items.length} // データの総数
    itemSize={35} // 各アイテムの高さ
    width={300} // 表示領域の幅
  >
    {({ index, style }) => (
      <div style={style}>
        {items[index]}
      </div>
    )}
  </List>
);

export default VirtualizedList;

const PaginatedList = ({ data, itemsPerPage }) => {
  const [currentPage, setCurrentPage] = React.useState(0);

  const startIndex = currentPage * itemsPerPage;
  const currentItems = data.slice(startIndex, startIndex + itemsPerPage);

  return (
    <div>
      {currentItems.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      <button
        onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 0))}
        disabled={currentPage === 0}
      >
        Previous
      </button>
      <button
        onClick={() => setCurrentPage((prev) => prev + 1)}
        disabled={startIndex + itemsPerPage >= data.length}
      >
        Next
      </button>
    </div>
  );
};

const InfiniteScrollList = () => {
  const [items, setItems] = React.useState([]);
  const [page, setPage] = React.useState(0);

  React.useEffect(() => {
    const fetchData = async () => {
      const newItems = await fetch(`/api/data?page=${page}`).then((res) => res.json());
      setItems((prev) => [...prev, ...newItems]);
    };
    fetchData();
  }, [page]);

  const handleScroll = (e) => {
    const { scrollTop, scrollHeight, clientHeight } = e.target.scrollingElement;
    if (scrollTop + clientHeight >= scrollHeight) {
      setPage((prev) => prev + 1);
    }
  };

  React.useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
};

// 非効率な状態配置（親が全ての状態を持つ）
const Parent = () => {
  const [inputValue, setInputValue] = React.useState('');
  const [selectedItem, setSelectedItem] = React.useState(null);

  return (
    <div>
      <InputComponent value={inputValue} onChange={setInputValue} />
      <DropdownComponent selected={selectedItem} onSelect={setSelectedItem} />
    </div>
  );
};

// 改善後（各子が必要な状態を持つ）
const Parent = () => (
  <div>
    <InputComponent />
    <DropdownComponent />
  </div>
);

const InputComponent = () => {
  const [inputValue, setInputValue] = React.useState('');
  return <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />;
};

const DropdownComponent = () => {
  const [selectedItem, setSelectedItem] = React.useState(null);
  return <select onChange={(e) => setSelectedItem(e.target.value)} />;
};

// 非効率な例
const App = () => {
  const [state, setState] = React.useState({ count: 0, text: '' });

  return (
    <div>
      <Counter count={state.count} setState={setState} />
      <TextInput text={state.text} setState={setState} />
    </div>
  );
};

// 効率的な例
const App = () => {
  const [count, setCount] = React.useState(0);
  const [text, setText] = React.useState('');

  return (
    <div>
      <Counter count={count} setCount={setCount} />
      <TextInput text={text} setText={setText} />
    </div>
  );
};

const ThemeContext = React.createContext('light');

const App = () => {
  const [theme, setTheme] = React.useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <ThemedComponent />
      <button onClick={() => setTheme((prev) => (prev === 'light' ? 'dark' : 'light'))}>
        Toggle Theme
      </button>
    </ThemeContext.Provider>
  );
};

const ThemedComponent = () => {
  const theme = React.useContext(ThemeContext);
  return <div style={{ background: theme === 'light' ? '#fff' : '#333' }}>Theme: {theme}</div>;
};

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useDispatch, useSelector } from 'react-redux';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});

const store = configureStore({
  reducer: { counter: counterSlice.reducer },
});

const Counter = () => {
  const count = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(counterSlice.actions.decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(counterSlice.actions.increment())}>+</button>
    </div>
  );
};

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

npm install react-window

import { FixedSizeList } from 'react-window';

const MyList = ({ items }) => (
  <FixedSizeList
    height={400}
    width={300}
    itemSize={35}
    itemCount={items.length}
  >
    {({ index, style }) => <div style={style}>{items[index]}</div>}
  </FixedSizeList>
);

npm install @reduxjs/toolkit react-redux

import { createSlice, configureStore } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});

const store = configureStore({
  reducer: { counter: counterSlice.reducer },
});

const Counter = () => {
  const count = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(counterSlice.actions.decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(counterSlice.actions.increment())}>+</button>
    </div>
  );
};

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

npm install @tanstack/react-query

import { useQuery } from '@tanstack/react-query';

const fetchPosts = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  return response.json();
};

const PostList = () => {
  const { data, isLoading } = useQuery(['posts'], fetchPosts);

  if (isLoading) return <p>Loading...</p>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

npm install react-hook-form

import { useForm } from 'react-hook-form';

const MyForm = () => {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="username" ref={register({ required: true })} />
      {errors.username && <p>Username is required</p>}
      <button type="submit">Submit</button>
    </form>
  );
};

const measurePerformance = () => {
  const start = performance.now();
  // 測定したい処理
  for (let i = 0; i < 1000000; i++) {}
  const end = performance.now();
  console.log(`Execution time: ${end - start} ms`);
};

measurePerformance();

npm install @welldone-software/why-did-you-render

import React from 'react';
import ReactDOM from 'react-dom';
import './wdyr'; // why-did-you-render設定ファイル

const MyComponent = React.memo(({ count }) => {
  console.log('Rendered');
  return <div>{count}</div>;
});

MyComponent.whyDidYouRender = true;

ReactDOM.render(<MyComponent count={0} />, document.getElementById('root'));

const useBatchUpdates = () => {
  const [data, setData] = React.useState([]);
  const buffer = React.useRef([]);

  React.useEffect(() => {
    const interval = setInterval(() => {
      if (buffer.current.length > 0) {
        setData((prev) => [...prev, ...buffer.current]);
        buffer.current = [];
      }
    }, 100);

    return () => clearInterval(interval);
  }, []);

  const addData = (newData) => {
    buffer.current.push(newData);
  };

  return { data, addData };
};

import { FixedSizeList } from 'react-window';

const ChatLog = ({ messages }) => (
  <FixedSizeList
    height={400}
    itemCount={messages.length}
    itemSize={50}
    width={300}
  >
    {({ index, style }) => (
      <div style={style}>
        {messages[index]}
      </div>
    )}
  </FixedSizeList>
);

const Message = React.memo(({ text }) => {
  console.log('Rendering message');
  return <div>{text}</div>;
});

const MessageList = ({ messages }) => (
  <div>
    {messages.map((msg, index) => (
      <Message key={index} text={msg} />
    ))}
  </div>
);

import { useQueryClient } from '@tanstack/react-query';

const useRealtimeUpdates = () => {
  const queryClient = useQueryClient();

  React.useEffect(() => {
    const ws = new WebSocket('wss://example.com/updates');

    ws.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      queryClient.setQueryData(['realtimeData'], (oldData) => [...oldData, newData]);
    };

    return () => ws.close();
  }, [queryClient]);
};

const ChatApp = () => {
  const [messages, setMessages] = React.useState([]);

  React.useEffect(() => {
    const ws = new WebSocket('wss://example.com/chat');
    ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      setMessages((prev) => [...prev, message]);
    };

    return () => ws.close();
  }, []);

  return <ChatLog messages={messages} />;
};