Migrate React class components to functional components with hooks

[GaryJones]

Summary

Convert the remaining React class components to functional components using hooks. This modernises the codebase and provides several benefits.

What are Hooks?

Hooks (introduced in React 16.8, 2019) let you use state and lifecycle features in functional components instead of classes. They're now the recommended approach.

// Before: Class component
class EditorContainer extends Component {
  constructor(props) {
    super(props);
    this.state = { authors: [] };
  }
  
  componentDidMount() {
    this.loadAuthors();
  }
  
  render() {
    return <Editor authors={this.state.authors} />;
  }
}

// After: Functional component with hooks
function EditorContainer() {
  const [authors, setAuthors] = useState([]);
  
  useEffect(() => {
    loadAuthors().then(setAuthors);
  }, []);
  
  return <Editor authors={authors} />;
}

Benefits

1. Less code - Typically 30-50% fewer lines (no constructor, no this binding, no lifecycle method boilerplate)
2. Easier to understand - Logic is colocated instead of spread across lifecycle methods
3. Reusable logic - Custom hooks can share stateful logic between components
4. Better TypeScript support - Functional components have simpler type signatures
5. Performance - Hooks enable fine-grained memoisation with useMemo/useCallback
6. Testing - Easier to test (no enzyme shallow rendering issues)

Drawbacks / Considerations

1. Learning curve - Different mental model (effects vs lifecycles)
2. Existing tests - May need updates if they rely on class instance methods
3. Dependency arrays - useEffect dependencies can be tricky to get right
4. No this - Can't access instance methods (but this is usually fine)

Components to Migrate

Component	Lines	Complexity	Notes
AppContainer	~80	Medium	Entry point, config loading
EditorContainer	~350	High	Most complex, many methods
EntryContainer	~100	Medium	Entry display, edit mode
PreviewContainer	~50	Low	Simple preview
EventsContainer	~60	Low	Key events
PaginationContainer	~40	Low	Load more

Already using hooks: LexicalEditor (new implementation)

Approach

1. Start with simplest components (PaginationContainer, PreviewContainer)
2. Create custom hooks for shared logic (useEntries, usePolling)
3. Migrate complex components last (EditorContainer)
4. Update tests as components are converted

References

• React Hooks documentation
• Migrating from classes