使用componentWillReceiveProps传递父子组件状态的Props未定义及重复渲染问题

Hey Laura, let's work through this problem step by step—your instinct to avoid the hardcoded setTimeout is totally right, and we can fix the unnecessary re-renders from componentWillReceiveProps with better lifecycle practices.

The Root of the Problem #

Your issue stems from the parent component's async state update: when the child first mounts, the check prop isn't ready yet (since the async operation takes 2 seconds). Using componentWillReceiveProps solves the undefined prop problem, but this lifecycle method runs every time any prop changes—even if it's not the check prop you care about. If you're updating state inside it without checks, that triggers extra re-renders.

Better Solutions for Class Components #

Since componentWillReceiveProps is actually deprecated in modern React, let's use the recommended alternatives:

1. Use componentDidUpdate with Prop Comparison

This lifecycle method runs after the component updates, and you can explicitly check if the check prop has changed before running your logic:

componentDidUpdate(prevProps) {
  // Only run logic if the `check` prop has actually changed
  if (this.props.check !== prevProps.check) {
    // Your logic to handle the updated `check` prop goes here
    this.processCheckData(this.props.check);
  }
}

// Also handle the initial mount case if needed
componentDidMount() {
  if (this.props.check) {
    this.processCheckData(this.props.check);
  }
}

This way, you only trigger your logic when the specific prop you care about changes, eliminating unnecessary re-renders.

2. Use getDerivedStateFromProps (For State-Dependent Props)

If your child component needs to sync its internal state with the check prop, use this static lifecycle method instead—it's designed exactly for this scenario:

static getDerivedStateFromProps(nextProps, prevState) {
  // Only update state if `check` has changed
  if (nextProps.check !== prevState.currentCheck) {
    return {
      currentCheck: nextProps.check
    };
  }
  // Return null if no state update is needed
  return null;
}

state = {
  currentCheck: null
};

This ensures your child's state only updates when check changes, avoiding extra re-renders from unrelated prop updates.

Bonus: Prevent Undefined Props Upfront #

You can also add guards in both parent and child to avoid dealing with undefined props entirely:

• Parent component: Set a sensible initial state for check (like null or an empty object) instead of leaving it undefined.
• Child component: Add conditional rendering to handle the loading state:

render() {
  const { check } = this.props;
  // Show a loading state until `check` is ready
  if (!check) {
    return <div>Loading check data...</div>;
  }
  // Render your full component once `check` exists
  return <div>{/* Your component content using `check` */}</div>;
}

If You're Using Function Components #

If you ever migrate to function components, the equivalent fix is using useEffect with a dependency array:

import { useEffect } from 'react';

function ChildComponent({ check }) {
  useEffect(() => {
    if (check) {
      // Process `check` data here
    }
  }, [check]); // Only run this effect when `check` changes

  if (!check) {
    return <div>Loading check data...</div>;
  }

  return <div>{/* Component content */}</div>;
}

These approaches are way more reliable than setTimeout and eliminate the unwanted re-renders you were seeing.

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