Beyond useCallback: Systematic Solutions for Indian Development Teams

1. The Reference Stability Hierarchy

Indian teams should adopt this decision framework:

1. Primitive values: Always reference-stable (no action needed)
2. Objects/Arrays: Use useMemo with specific dependencies
3. Functions: Prefer useCallback or extract to module level
4. Complex objects: Implement custom comparison or normalization

const UserProfile = React.memo(({ user, onUpdate }) => {
  // Component logic
});

function Parent() {
  const [user, setUser] = useState(initialUser);

  return <UserProfile
    user={user}
    onUpdate={(field, value) => {
      setUser(prev => ({...prev, [field]: value}));
    }}
  />
}

const UserProfile = React.memo(({ user, onUpdate }) => {
  // Component logic
});

function Parent() {
  const [user, setUser] = useState(initialUser);

  const handleUpdate = useCallback((field, value) => {
    setUser(prev => ({...prev, [field]: value}));
  }, []); // No dependencies needed

  const stableUser = useMemo(() => user, [user.id, user.lastUpdated]);

  return <UserProfile
    user={stableUser}
    onUpdate={handleUpdate}
  />
}

2. The Context Stabilization Pattern

For teams using Context (especially in large apps like Ola or Dunzo), implement this pattern:

const [rawState, setRawState] = useState(initialState);

const stableValue = useMemo(() => {
  // Only include what consumers actually need
  return {
    currentLocation: rawState.location,
    userPreferences: rawState.preferences,
    // Compute derived data here to avoid
    // each consumer doing it independently
    nearbyDrivers: computeNearby(rawState.location, rawState.drivers)
  };
}, [
  rawState.location,
  rawState.preferences,
  rawState.drivers // Only when drivers list reference changes
]);

return (
  <AppContext.Provider value={stableValue}>
    {children}
  </AppContext.Provider>
);

3. The Selector Pattern for Large State

Inspired by Redux but without the boilerplate, this pattern (used by Zomato) reduces reference churn:

function useStableSelector(state, selector) {
  return useMemo(() => selector(state), [state, selector]);
}

// Usage:
const userName = useStableSelector(state, s => s.user.name);
const cartItems = useStableSelector(state, s => s.cart.items);

4. The Animation Optimization

For interactive UIs (critical for edtech and gaming apps), combine:

• CSS animations for simple transitions (hardware-accelerated)
• Web Animations API for complex sequences
• Framer Motion for React-specific needs (auto-stabilizes references)

Dream11 reduced their match simulation jank by 62% using this hybrid approach.