Optimizing Renders with React Memo

In the previous lesson, you split State and Dispatch into separate contexts to stop “write-only” components from re-rendering on every tick. In this lesson, you will push that idea into the UI. We will use React.memo to keep static UI pieces from re-rendering when their inputs have not changed. Our focus is the GameActions UI: you will memoize the ActionButton leaf component and also the container itself so parent updates do not cascade.

const ActionButton = memo(function ActionButton({ action, onClick, disabled }) {
  return (
    <div className="action-card">
      <div className="action-header">
        <span className="action-icon">{action.icon}</span>
        <h4>{action.name}</h4>
      </div>
      <p className="action-description">{action.description}</p>
      <div className="action-details">
        <div className="action-cost">
          <strong>Cost:</strong> {action.cost}
        </div>
        <div className="action-effect">
          <strong>Effect:</strong> {action.effect}
        </div>
      </div>
      <button
        className={action.class}
        disabled={disabled}
        onClick={e => {
          e.currentTarget.blur();
          onClick();
        }}
      >
        {action.enabled ? 'Perform' : 'Not Available'}
      </button>
    </div>
  );
});

What it does:

• Wraps the button card in React.memo so React can skip re-rendering when its props are the same (shallow compare).
• Receives three inputs: the action descriptor, the onClick handler, and the disabled flag.
• Blurs the button after a click for a cleaner keyboard/focus experience.
• This concentrates re-rendering on the specific buttons whose inputs actually change.

{actions.map(action => (
  <ActionButton
    key={action.name}
    action={action}
    onClick={handleAction(action.actionType, action.enabled)}
    disabled={!action.enabled || state.timers.isPaused}
  />
))}

What it does:

• Renders a grid of ActionButton components, one per action descriptor.
• onClick triggers the proper game action (only when enabled).
• disabled also honors the global pause state to prevent accidental input during a pause.
• Because each ActionButton gets only the data it needs, React.memo can compare those props and avoid re-rendering buttons whose inputs did not change.

export default memo(GameActions);

What it does:

• Wraps the GameActions container in React.memo so it will not re-render due to parent updates unless its own props change.
• Combined with the separate Dispatch context (from the previous lesson), this helps isolate the action panel so the frequent timer tick does not ripple through components that do not need to change.

You learned how to:

• Use React.memo to keep leaf UI (ActionButton) from re-rendering when props are unchanged.
• Pass focused props (action, onClick, disabled) so only the affected buttons update.
• Memoize the container to block parent-driven re-renders.

Up next, you will put these ideas into action and see how much smoother the game feels when only the right components re-render.