如何在纯功能组件中处理Ajax反应？

Question

I'm trying to write all my components as pure functions, but now I run into trouble. I have a component that looks somewhat like below. Trouble is, the result of the ajax request causes a rerender, which causes another ajax request, and there you have your infinite loop. How to properly handle this?

const PageProductFunnel = function (props) {
  const agent = ajaxagent;
  var list = [];

  agent.get(`https://mylist.com/${productSKU}`).then((res) => {
    list = res.data;
  });

  return (
    <div>
      <div className="cell">
        <article className="article">
          <h1 className="article-title">{product.name}</h1>
          <FunnelStep {...props} list={list} />
          <ButtonAddToCart product={product} />
        </article>
      </div>
    </div>
  );
};

Answer 1

There are few approaches you can take:

1. fetch async data globaly, not inside render of the component
2. Do not use pure function for this component, and hook async into life cycle methods

Answer 2

You need to use stateful components for this.

class PageProductFunnel extends React.Component {
  state = {
    "list": []
  }

  componentWillMount () {
    agent.get(`https://mylist.com/${productSKU}`).then((res) => {
      this.setState({list:res.data})
    });
  }

  render () {
    return (
      <div>
        <div className="cell">
          <article className="article">
            <h1 className="article-title">{product.name}</h1>
            <FunnelStep {...props} list={this.state.list} />
            <ButtonAddToCart product={product} />
          </article>
       </div>
      </div>
    );
  }
};

Answer 3

EDIT Please read the comments. After some more considerations, I've decided to implement Davorin Ruševljans first suggestion. My own solution works but his is better.

---

Thanks for the suggestions but they really don't solve the problem. All my code is pure so far, and I really want to stick with it. Making the call on a global level doesn't change anything in my case as the response would still cause a render.

I changed the code so that the list is part of the state (I'm using redux). Only if the list is empty, I perform the ajax call. Whenever I know I expect new data, I clear the old list before the page renders again.

if (props.list.length === 0) {
  agent.get(`https://mylist.com/${productSKU}`).then((res) => {
    props.setList(res.data);
  });
}

Answer 4

The better life cycle hook to do an ajax call is componentDidMount (). If you are so specific to use pure component you can use in pure Component as well.

class Sample extends PureComponent{
  //react implement ShouldComponentUpdate for us which does shallow comparison
  componentDidMount(){
     //api call here
  }
 }

But You can't build a react app using only pureComponent, Because if there is a case where you wan't to stop the updation life cycle by checking the state, then you can't do that using PureComponent Because Pure component does only shallow checking for us and it checks for all the states in the component.

We should balance stateful, PureComponent, Stateless among the project.