1-lifecycle-example.js

// Setup and clean up are logically coupled together but defined separatedly and 
// the implementing developer must know that the functionalty comes in pairs.
// We also have the problem where we must store any reference needed by the clean up in the component itself.

function setupFirstThing() {
  // Setup is in this function
  const handle = setupSomething();
  return handle;
}

function teardownFirstThing(handle) {
  // Cleanup is in another function
  teardownSomething(handle);
}

function setupSecondThing() {
  // Setup is in this function
}

function teardownSecondThing() {
  // Cleanup is in another function
}

function setupThirdThing() {
  // Setup is in this function
  const handle = setupSomething();
  return handle;
}

function teardownThirdThing(handle) {
  // Cleanup is in another function
  teardownSomething(handle);
}


new Vue({
  
  created() {
    this.firstHandle = setupFirstThing();
    setupSecondThing();
    this.thirdHandle = setupThirdThing();
  },
  
  destroyed() {
    teardownFirstThing(this.firstHandle);
    teardownSecondThing();
    teardownThirdThing(this.thirdHandle);
  }
})

2-hooks-example.js

function useFirstThing(x, y) {
  useEffect(() => {
    // Setup is in the beginning
    const handle = setupSomething();
    
    // Cleanup is in the end
    return () => teardownSomething(handle);
  }, [x, y]);
}

function useSecondThing(x, y) {
  useEffect(() => {
    // Setup is in the beginning
    const handle = setupSomething();
    
    // Cleanup is in the end
    return () => teardownSomething(handle);
  }, [x, y]);
}

function useThirdThing(x, y) {
  useEffect(() => {
    // Setup is in the beginning
    const handle = setupSomething();
    
    // Cleanup is in the end
    return () => teardownSomething(handle);
  }, [x, y]);
}

export function MyComponent() {
  // All these calls a self contained and non-contaminant.
  useFirstThing();
  useSecondThing();
  useThirdThing();
  
  return <div/>
}