Fix useEffect dependency issue by wrapping loadOrders with useCallback

[Copilot]

The useEffect hook in AppContext.tsx had loadOrders in its dependency array, but the function was recreated on every render, causing unnecessary effect executions.

Changes

• Wrapped loadOrders with useCallback and added userRole to its dependency array
• Added useCallback to React imports

This ensures loadOrders has a stable reference that only changes when userRole changes, making the useEffect dependency array [userRole, loadOrders] work correctly.

// Before
const loadOrders = async () => {
  if (userRole !== UserRole.USER) return;
  // ... fetch logic
};

// After
const loadOrders = useCallback(async () => {
  if (userRole !== UserRole.USER) return;
  // ... fetch logic
}, [userRole]);

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.