Redux - DevTools & Performance Patterns

const { createSlice, configureStore } = RTK;
const slice = createSlice({ name:'stats', initialState:{ a:0, b:0 }, reducers:{ incA(s){s.a++}, incB(s){s.b++} } });
const store = configureStore({ reducer:{ stats: slice.reducer } });
function App(){
  const { Provider, useSelector, useDispatch } = ReactRedux;
  let rendersA=0, rendersB=0;
  function ShowA(){ const a = useSelector(s=>s.stats.a); rendersA++; return <div>A:{a} (renders {rendersA})</div> }
  function ShowB(){ const b = useSelector(s=>s.stats.b); rendersB++; return <div>B:{b} (renders {rendersB})</div> }
  function Panel(){
    const dispatch = useDispatch();
    return (
      <div>
        <button onClick={()=>dispatch(slice.actions.incA())}>Inc A</button>
        <button onClick={()=>dispatch(slice.actions.incB())} style={{marginLeft:8}}>Inc B</button>
        <div style={{marginTop:8}}><ShowA /><ShowB /></div>
      </div>
    );
  }
  return <Provider store={store}><Panel /></Provider>;
}
ReactDOM.createRoot(document.getElementById('perf-root')).render(<App />);