const useUserProfile = (userId: number) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId).then(setUser).finally(() => setLoading(false));
  }, [userId]);

  return { user, loading, updateUser };
};

const useDebounce = <T>(value: T, delay: number): T => {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
};

// Usage in search component
const SearchComponent = () => {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery) {
      performSearch(debouncedQuery);
    }
  }, [debouncedQuery]);

  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
};

class Api::V1::UsersController < ApplicationController
  before_action :authenticate_user!, except: [:create]
  before_action :set_user, only: [:show, :update, :destroy]

  def index
    users = User.includes(:profile, :posts)
                .where(status: :active)
                .order(created_at: :desc)
                .page(params[:page])
                .per(20)

    render json: users, include: [:profile], meta: pagination_meta(users)
  end

  def show
    render json: @user, serializer: DetailedUserSerializer
  end

  def create
    user = User.new(user_params)
    if user.save
      UserMailer.welcome_email(user).deliver_later
      render json: user, status: :created
    else
      render json: { errors: user.errors }, status: :unprocessable_entity
    end
  end

  private

  def user_params
    params.require(:user).permit(:email, :password, :name, profile_attributes: [:bio, :avatar])
  end
end

interface AppState {
  user: User | null;
  theme: 'light' | 'dark';
  notifications: Notification[];
}

type AppAction =
  | { type: 'SET_USER'; payload: User }
  | { type: 'LOGOUT' }
  | { type: 'TOGGLE_THEME' }
  | { type: 'ADD_NOTIFICATION'; payload: Notification };

const appReducer = (state: AppState, action: AppAction): AppState => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'LOGOUT':
      return { ...state, user: null };
    case 'TOGGLE_THEME':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    case 'ADD_NOTIFICATION':
      return { ...state, notifications: [...state.notifications, action.payload] };
    default:
      return state;
  }
};

export const AppProvider: React.FC<{children: React.ReactNode}> = ({ children }) => {
  const [state, dispatch] = useReducer(appReducer, initialState);

  const contextValue = useMemo(() => ({
    state,
    dispatch,
    actions: {
      login: (user: User) => dispatch({ type: 'SET_USER', payload: user }),
      logout: () => dispatch({ type: 'LOGOUT' }),
      toggleTheme: () => dispatch({ type: 'TOGGLE_THEME' }),
      addNotification: (notification: Notification) =>
        dispatch({ type: 'ADD_NOTIFICATION', payload: notification }),
    },
  }), [state]);

  return <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>;
};

-- Before optimization (slow query)
SELECT u.name, COUNT(p.id) as post_count, AVG(c.rating) as avg_rating
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
LEFT JOIN comments c ON p.id = c.post_id
GROUP BY u.id;

-- After optimization (with proper indexing)
SELECT
  u.name,
  COUNT(p.id) as post_count,
  COALESCE(AVG(c.rating), 0) as avg_rating
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
LEFT JOIN comments c ON p.id = c.post_id
WHERE u.created_at >= '2024-01-01'
  AND u.status = 'active'
  AND p.published = true
GROUP BY u.id, u.name
HAVING COUNT(p.id) > 0
ORDER BY post_count DESC, avg_rating DESC
LIMIT 100;

-- Create indexes for better performance
CREATE INDEX idx_users_active_created ON users(status, created_at);
CREATE INDEX idx_posts_user_published ON posts(user_id, published);
CREATE INDEX idx_comments_post_rating ON comments(post_id, rating);