HOC中的componentDidUpdate在Container组件输入值变更时未触发日志输出的问题排查

Hey there! The issue you're facing makes total sense once you break down how React HOC lifecycle methods work. Let me explain why componentDidUpdate isn't triggering, then walk you through a few solutions.

Why componentDidUpdate Isn't Firing #

Your HOC's componentDidUpdate only triggers when the HOC's own props or state change—it doesn't care about internal state updates in the wrapped Container component. Since Container manages its own name state internally, typing in the input only re-renders Container itself, not the HOC wrapping it. That's why the HOC's lifecycle method never runs when you update the input.

Solution 1: Lift State Up to the HOC (Recommended) #

If it fits your use case, moving state management into the HOC ensures any state change will trigger the HOC's lifecycle methods. Here's how to adjust your code:

import React, { Component } from "react";

function logProps(WrappedComponent) {
  return class extends Component {
    state = { name: "" };

    componentDidUpdate(prevProps, prevState) {
      console.log("inside componentDidUpdate");
      // Optional: Log specific state changes for clarity
      if (prevState.name !== this.state.name) {
        console.log(`Name updated: ${prevState.name} → ${this.state.name}`);
      }
    }

    componentDidMount() {
      console.log("insideComponentDidMount");
    }

    handleInputChange = (value) => {
      this.setState({ name: value });
    };

    render() {
      // Pass state and handler down to the wrapped component
      return (
        <WrappedComponent
          {...this.props}
          name={this.state.name}
          handleInputChange={this.handleInputChange}
        />
      );
    }
  };
}

const Container = (props) => {
  return (
    <React.Fragment>
      <input
        value={props.name}
        onChange={(e) => props.handleInputChange(e.target.value)}
      />
    </React.Fragment>
  );
};

export default logProps(Container);

Now every time you type in the input, the state update lives in the HOC, which triggers componentDidUpdate as you expected.

Solution 2: Let the Wrapped Component Notify the HOC of Updates #

If you need to keep state inside Container, you can add a callback prop that the child component calls whenever it updates. This lets the HOC trigger a re-render manually:

import React, { Component, useEffect, useState } from "react";

function logProps(WrappedComponent) {
  return class extends Component {
    componentDidUpdate(prevProps) {
      console.log("inside componentDidUpdate");
    }

    componentDidMount() {
      console.log("insideComponentDidMount");
    }

    handleChildUpdate = () => {
      // Force the HOC to re-render, which triggers componentDidUpdate
      this.forceUpdate();
    };

    render() {
      return (
        <WrappedComponent
          {...this.props}
          onUpdate={this.handleChildUpdate}
        />
      );
    }
  };
}

const Container = (props) => {
  const [name, setName] = useState("");

  // Call the HOC's update callback every time Container re-renders
  useEffect(() => {
    props.onUpdate();
  });

  const handleInputChange = (value) => {
    setName(value);
  };

  return (
    <React.Fragment>
      <input
        value={name}
        onChange={(e) => handleInputChange(e.target.value)}
      />
    </React.Fragment>
  );
};

export default logProps(Container);

Here, Container uses useEffect with no dependencies to fire the onUpdate callback every time it re-renders. The HOC responds by calling forceUpdate(), which triggers its componentDidUpdate.

Solution 3: Use a Functional HOC with useEffect #

If you prefer functional components, you can rewrite the HOC using hooks. Note that this will fire on every render of the HOC, so you'll still need to combine it with state lifting or the callback approach to capture internal state changes in Container:

import React, { useEffect, useState, useRef } from "react";

function logProps(WrappedComponent) {
  return function LoggedComponent(props) {
    const renderCountRef = useRef(0);

    // Mimic componentDidMount
    useEffect(() => {
      console.log("inside componentDidMount equivalent");
    }, []);

    // Mimic componentDidUpdate (fires on every render)
    useEffect(() => {
      renderCountRef.current += 1;
      console.log(`inside componentDidUpdate equivalent (render #${renderCountRef.current})`);
    });

    return <WrappedComponent {...props} />;
  };
}

const Container = (props) => {
  const [name, setName] = useState("");

  const handleInputChange = (value) => {
    setName(value);
  };

  return (
    <React.Fragment>
      <input
        value={name}
        onChange={(e) => handleInputChange(e.target.value)}
      />
    </React.Fragment>
  );
};

export default logProps(Container);

内容的提问来源于stack exchange，提问作者kshitiz