Hook Functions

Hook functions provide reactive access to Divi 5 state and enable component-level state management. These are React hooks that integrate with the Divi data layer and provide clean patterns for managing module context, state subscriptions, and user interactions.

WordPress Data Hooks

useSelect(mapSelect, deps)

React hook that subscribes to store data changes. Use this to reactively access store data in functional components.

// Basic store data selection
const moduleAttrs = useSelect(select => 
  select('divi/edit-post').getModuleAttrs(moduleId), [moduleId]
);

// Multiple store selections
const {
  content,
  layoutType,
  isThemeBuilder
} = useSelect(select => ({
  content: select('divi/edit-post').getContent(),
  layoutType: select('divi/settings').getSetting(['layout', 'type']),
  isThemeBuilder: select('divi/settings').getSetting(['conditionalTags', 'is_tb'])
}), []);

// Complex data selection with dependency
const pageSettings = useSelect(select => 
  select('divi/page-settings').getSettings(), []
);

// Breakpoint-dependent selection
const currentBreakpoint = useSelect(select => 
  selectStore('divi/app-ui').getBreakpoint(), []
);

useDispatch(storeName)

React hook that returns dispatch functions for a specific store. Use this to get action creators for state modifications.

// Basic dispatch usage
const { editModuleAttribute, addModule, removeModule } = useDispatch('divi/edit-post');

// App UI dispatchers
const { 
  setView, 
  setAttributeState, 
  setElementProperty 
} = useDispatch('divi/app-ui');

// Page settings dispatcher
const { update } = useDispatch('divi/page-settings');

// Modal management
const { open, close } = useDispatch('divi/modal-library');

// Global data management
const { 
  updateGlobalColor, 
  addGlobalVariable,
  deleteGlobalColor 
} = useDispatch('divi/global-data');

Context Hooks

useContext(moduleContext)

Access the current module context within a module component. Provides access to module ID and other contextual information.

import { moduleContext } from '@divi/module';

// Get module ID from context
const { moduleId } = useContext(moduleContext);

// Get module ID and name
const { moduleId, moduleName } = useContext(moduleContext);

// Use in a component
function MyModuleComponent() {
  const { moduleId } = useContext(moduleContext);
  
  const moduleAttrs = useSelect(select => 
    select('divi/edit-post').getModuleAttrs(moduleId), [moduleId]
  );
  
  return <div>Module: {moduleId}</div>;
}

Combined Hook Patterns

Editing Module Attributes

Common pattern for editing module attributes reactively:

function ModuleFieldComponent() {
  const { moduleId } = useContext(moduleContext);
  const { editModuleAttribute } = useDispatch('divi/edit-post');
  
  // Get current attribute value
  const currentValue = useSelect(select => 
    select('divi/edit-post').getModuleAttr(moduleId, 'content'), [moduleId]
  );
  
  // Handle attribute changes
  const handleChange = useCallback((newValue: string) => {
    editModuleAttribute({
      id: moduleId,
      attrName: 'content',
      value: newValue
    });
  }, [moduleId, editModuleAttribute]);
  
  return (
    <input 
      value={currentValue || ''} 
      onChange={e => handleChange(e.target.value)} 
    />
  );
}

Module Selection Management

Pattern for managing module selection state:

function ModuleComponent() {
  const { moduleId } = useContext(moduleContext);
  const { setElementProperty } = useDispatch('divi/app-ui');
  
  // Get current app state
  const { currentView, attributeState } = useSelect(select => ({
    currentView: selectStore('divi/app-ui').getBreakpoint(),
    attributeState: select('divi/app-ui').getAttributeState()
  }), []);
  
  // Handle responsive view changes
  const handleViewChange = useCallback((view: string) => {
    setElementProperty({
      elementName: 'viewport',
      propertyGroup: 'responsive',
      propertyName: 'activeBreakpoint',
      value: view
    });
  }, [setElementProperty]);
  
  return (
    <div data-view={currentView} data-state={attributeState}>
      {/* Module content */}
    </div>
  );
}

Global State Integration

Pattern for working with global colors and variables:

function GlobalStylesComponent() {
  const { moduleId } = useContext(moduleContext);
  const { updateGlobalColor, addGlobalVariable } = useDispatch('divi/global-data');
  
  // Get global data
  const globalColors = useSelect(select => 
    select('divi/global-data').getGlobalColors(), []
  );
  
  // Add new global color
  const handleAddColor = useCallback((colorValue: string, colorName: string) => {
    addGlobalColor({
      name: colorName,
      value: colorValue,
      id: generateId()
    });
  }, [addGlobalColor]);
  
  // Update existing color
  const handleUpdateColor = useCallback((colorId: string, newValue: string) => {
    updateGlobalColor({
      id: colorId,
      value: newValue
    });
  }, [updateGlobalColor]);
  
  return (
    <div>
      {globalColors.map(color => (
        <div key={color.id} style={{ backgroundColor: color.value }}>
          {color.name}
        </div>
      ))}
    </div>
  );
}

Modal Management Hooks

Pattern for handling modal interactions:

function ModuleSettingsComponent() {
  const { moduleId } = useContext(moduleContext);
  const { open, close } = useDispatch('divi/modal-library');
  
  // Open specific modal
  const handleOpenColorPicker = useCallback(() => {
    open({
      modalName: 'color-picker',
      moduleId,
      options: { 
        fieldName: 'backgroundColor' 
      }
    });
  }, [open, moduleId]);
  
  // Open dynamic content modal
  const handleOpenDynamicContent = useCallback(() => {
    open({
      modalName: 'dynamic-content',
      moduleId,
      options: {
        fieldType: 'text',
        currentValue: 'Static content'
      }
    });
  }, [open, moduleId]);
  
  return (
    <div>
      <button onClick={handleOpenColorPicker}>
        Open Color Picker
      </button>
      <button onClick={handleOpenDynamicContent}>
        Add Dynamic Content
      </button>
    </div>
  );
}

Page Settings Integration

Pattern for working with page-level settings:

function PageSettingsComponent() {
  const { update } = useDispatch('divi/page-settings');
  
  // Get current page settings
  const pageSettings = useSelect(select => 
    select('divi/page-settings').getSettings(), []
  );
  
  // Update page title
  const handleTitleChange = useCallback((newTitle: string) => {
    update('pageTitle', newTitle);
  }, [update]);
  
  // Update custom CSS
  const handleCSSChange = useCallback((newCSS: string) => {
    update('customCSS', newCSS);
  }, [update]);
  
  return (
    <div>
      <input 
        value={pageSettings?.pageTitle || ''} 
        onChange={e => handleTitleChange(e.target.value)}
        placeholder="Page Title"
      />
      <textarea 
        value={pageSettings?.customCSS || ''} 
        onChange={e => handleCSSChange(e.target.value)}
        placeholder="Custom CSS"
      />
    </div>
  );
}

Hook Best Practices

• Always provide proper dependency arrays for useSelect to control re-renders
• Use useCallback for event handlers to prevent unnecessary child re-renders
• Extract complex selection logic into custom hooks for reusability
• Keep selectors simple and focused - avoid creating objects inside selectors

Store-Specific Hooks

Global Data Hooks

// Get global colors reactively
const globalColors = useSelect(select => 
  select('divi/global-data').getGlobalColors(), []
);

// Get specific global color
const primaryColor = useSelect(select => 
  select('divi/global-data').getGlobalColorById('primary-color'), []
);

// Get global variables
const globalVariables = useSelect(select => 
  select('divi/global-data').getGlobalVariables(), []
);

// Check if preset is active
const isPresetActive = useSelect(select => 
  select('divi/global-data').isActivePreset(), []
);

Modal Library Hooks

// Check if modal is active
const isModuleSettingsOpen = useSelect(select => 
  select('divi/modal-library').isModalActive('divi/module'), []
);

// Get modal owner
const modalOwner = useSelect(select => 
  select('divi/modal-library').getModalOwner('divi/module'), []
);

// Get modal state
const modalState = useSelect(select => 
  select('divi/modal-library').getModal('divi/page-settings'), []
);

Events Store Hooks

// Get selected modules
const selectedModules = useSelect(select => 
  select('divi/events').getSelectedModules(), []
);

// Get hovered module
const hoveredModule = useSelect(select => 
  select('divi/events').getHoveredModule(), []
);

// Check if module is selected
const isModuleSelected = useSelect(select => 
  select('divi/events').isSelectedModule(moduleId), [moduleId]
);

// Get dragged modules
const draggedModules = useSelect(select => 
  select('divi/events').getDraggedModules(), []
);

Additional Edit Post Hooks

// Get child modules
const childModules = useSelect(select => 
  select('divi/edit-post').getChildModules(moduleId), [moduleId]
);

// Get ancestor modules
const ancestors = useSelect(select => 
  select('divi/edit-post').getAncestorModules(moduleId, 'bottom-to-top'), [moduleId]
);

// Check if module is nested
const isNested = useSelect(select => 
  select('divi/edit-post').isNestedModule({ moduleId }), [moduleId]
);

Settings Store Hooks

// Check user permissions
const canUseDiviAI = useSelect(select => 
  select('divi/settings').checkRolePermission('divi_ai'), []
);

// Get enabled breakpoints
const enableedBreakpoints = useSelect(select => 
  select('divi/settings').getEnabledBreakpointNames(), []
);

// Get base breakpoint
const baseBreakpoint = useSelect(select => 
  select('divi/settings').getBaseBreakpointName(), []
);

Performance Optimization

• Split complex useSelect calls into multiple focused selectors
• Use empty dependency arrays [] for static data that doesn't need to update
• Include relevant dependencies [moduleId, fieldName] for reactive data
• Memoize expensive calculations outside of hooks when possible

Context Usage

• Always check if context exists before using values from useContext
• moduleContext is only available within module component trees
• Don't pass context values as props unnecessarily - components can access context directly