User Preferences Manager

Build a user preferences management system for a React application that efficiently handles user settings and prevents unnecessary component re-renders.

Requirements

Your system should manage user preferences (theme, language, notifications) and expose both the current preferences state and functions to update them. The implementation must be optimized to minimize re-renders when preferences change.

Preference Structure

The preferences should include:

• theme: A string value, either "light" or "dark"
• language: A string value, such as "en", "es", "fr"
• notifications: A boolean indicating whether notifications are enabled

State Management

Create a preferences provider component that:

• Initializes preferences with default values: theme "light", language "en", and notifications enabled (true)
• Provides the current preferences state to all child components
• Provides update functions to modify individual preference values
• Optimizes re-renders so that components consuming only the update functions don't re-render when preferences change

Update Functions

Provide these functions to update preferences:

• updateTheme(theme: string): Updates the theme preference
• updateLanguage(language: string): Updates the language preference
• updateNotifications(enabled: boolean): Updates the notifications preference

Component Structure

Implement the following components:

1. PreferencesProvider: Wraps the application and provides preferences state and update functions
2. ThemeDisplay: Shows the current theme value
3. LanguageSelector: Provides a way to change the language preference
4. PreferencesForm: A form component that allows updating all preferences

Test Cases

• When PreferencesProvider is rendered with default values, ThemeDisplay shows "light" @test
• When updateTheme is called with "dark", ThemeDisplay updates to show "dark" @test
• When updateLanguage is called with "es", the language preference changes to "es" @test
• When preferences state changes, components that only consume update functions do not re-render @test

Implementation

@generates

API

export interface Preferences {
  theme: string;
  language: string;
  notifications: boolean;
}

export interface PreferencesActions {
  updateTheme: (theme: string) => void;
  updateLanguage: (language: string) => void;
  updateNotifications: (enabled: boolean) => void;
}

export interface PreferencesProviderProps {
  children: React.ReactNode;
}

export const PreferencesProvider: React.FC<PreferencesProviderProps>;
export const ThemeDisplay: React.FC;
export const LanguageSelector: React.FC;
export const PreferencesForm: React.FC;

Dependencies { .dependencies }

react { .dependency }

Provides React framework functionality including hooks and context.

@types/react { .dependency }

Provides TypeScript type definitions for React.