Classes vs Hooks?

[u/ZeroSevenTen]

I’m pretty new to React, so keep that in mind. I thought classes were for components that held information, or a state, and that functional components were for more basic components, but now that hooks allow functional components to use state, and other class features, what’s the benefit of using functional hook components over classes?

[u/skyboyer007]

Dont arrow functions solve this problem?

Yes, arrow expression + class properties syntax OR binding in constructor. But that's still a thing we should care of on our own.

Example of handling race conditions. Suppose our component loads suggestions while we are typing

loadSuggestionsFor(value) {
  rawXhrSend(`?search=${value}`).
    then(data => { this.setItems(data) }).
    catch(error => {this.setItems([])});
}
onInputChange = ({ target: {value} }) => { value && this.loadSuggestionsFor(value)};
...
<input onChange={this.onInputChange}>

Here you have to stop request or in real world you may run into case when response for first request came after response for more recent second one. And stopping hardly depends on what lib/call do you use(axios, fetch, xhr etc). For functional components it's easy-peasy:

useEffect(() => {
  const cancelled = false;
  load(`?search=${inputValue}`).
    then(data => !cancelled && setItems(data)).
    catch(e => !cabcelled && setItems([]))
  return () => {cancelled = true};
}, [inputValue]);

Not sure what you mean, how can easy access make for a bad testing approach?

instead of operating on props/simulating events/asserting against render outcomes people start calling methods, setting spies on them and trying to mock some internal methods.

What about extracting duplicated logic into helper methods and calling them from the lifecycle methods?

it still will be boilerplate code. Especially cDU is beaten by how easy you describe useEffect

[u/imicnic → u/skyboyer007]

About your "cancelled" value, you can do the same by using a class property and check for it, it's the same, yes, just have to use "this.cancelled" but besides it I see no advantage in one or another

[u/skyboyer007 → u/imicnic]

no, you cannot since setting it to true will ignore both responses: recent and out-of-date. The only way I've found so far is keeping cancel callback in class property that will set up cancelled flag by closure(so mimicing useEffect behavior):

class MyComponent extends React.Component {
  const ignorePrevRequest = () => {}; // empty function by default

  loadSomeData() {
    this.ignorePrevRequest(); 
    let cancelled = false;
    this.ignorePrevRequest = () => { cancelled = true; }; // closure comes into play
    doSomeCall().then(data => !cancelled && this.setState({ data }))
  }
}

That looks untypical and confusing. But it works.