How to correctly use composition instead of inheritance?

Question

JavaScript

The project has a healthy component class that has a component heir. My task is to get rid of inheritance and replace it with composition.
The way the composition is described in the react documentation does not give me almost anything, but here I found an interesting article , which describes the composition using the connectToStores function.
My question is, does the article describe a more or less standard solution, or should this function be different in each individual case? Maybe there are some more sensible examples / articles of the implementation of the composition?

Answer 1

Something you are not talking about at all.
The point is that we have a common logic, there are two options, move it to the base class and inherit from it, or make a general class and make it a field in all other classes where we need it.
The disadvantage of the first option is that it is difficult to make changes in the future, especially if we do not control all the implementations of our class. If we want to add a method or field to the base class, then it may conflict with the name in the derived class and may break everything. With composition, of course, there is no such problem.
Therefore, it is recommended to use composition instead of inheritance.
Your React example is not the same at all. It’s even hard to imagine how and why to shove inheritance there.

Answer 2

Which is most likely happening. The child component pulls some API of the parent component.
Take out this "reusable" part separately and implement render props.
Super fictional example, but I hope you get the message.

// inheritance

class UrlLoader extends React.Component {
  state = {
    loading: false,
    result: null,
    error: null,
  };

  componentDidMount() {
    this.setState({
      loading: true,
    });

    this.load().then(
      (result) => {
        this.setState({
          result,
          loading: false,
        });
      },
      (error) => {
        this.setState({
          error,
          loading: false,
        });
      },
    );
  }

  load() {
    return fetch(this.props.url);
  }

  render() {
    const { loading, error, result } = this.state;

    if (loading) {
      return 'Loading...';
    }

    if (error) {
      return (
        <div className="error">
          {error}
        </div>
      );
    }

    return (
      <div className="page-result">
        {result}
      </div>
    );
  }
}

class FancyUrlLoader extends UrlLoader {
  componentDidMount() {
    super.componentDidMount();

    this.doSomethingElse();
  }

  doSomethingElse() {
    // something else
  }

  render() {
    const result = super.render();

    return (
      <div className="super-fancy">
        {result}
      </div>
    );
  }
}

// somewhere
const MyComponent = () => {
  return (
    <div>
      <FancyUrlLoader url="https://google.com" />
    </div>
  );
};

// composition

class UrlLoader extends React.Component {
  state = {
    loading: false,
    result: null,
    error: null,
  };

  componentDidMount() {
    this.setState({
      loading: true,
    });

    this.load().then(
      (result) => {
        this.setState({
          result,
          loading: false,
        });
      },
      (error) => {
        this.setState({
          error,
          loading: false,
        });
      },
    );
  }

  load() {
    return fetch(this.props.url);
  }

  render() {
    const { loading, error, result } = this.state;

    let render;

    if (loading) {
      render = 'Loading...';
    } else if (error) {
      render = (
        <div className="error">
          {error}
        </div>
      );
    } else {
      render = (
        <div className="page-result">
          {result}
        </div>
      );
    }

    return this.props.children(render);
  }
}

class FancyMaker extends React.Component {
  componentDidMount() {
    this.doSomethingElse();
  }

  doSomethingElse() {
    // something else
  }

  render() {
    return (
      <div className="super-fancy">
        {this.props.children}
      </div>
    );
  }
}

// somewhere
const MyComponent = () => {
  return (
    <div>
      <UrlLoader url="https://google.com">
        {(children) => (
          <FancyMaker>
            {children}
          </FancyMaker>
        )}
      </UrlLoader>
    </div>
  );
};