score:3

Accepted answer
const useCustomHook = () => {
  const [list, set_list] = useState([]);

  useEffect(() => console.log("useEffect", "list updated"), [list]);

  useEffect(() => {
    setTimeout(() => set_list(() => []), 1000);
  }, []);
};

score:1

import { useState, useEffect } from "react";
import React from "react";
import ReactDOM from "react-dom";

// called every render, because function component is called every render
const useCustomHook = () => {
  
  // 4 first useState, list=[] by default, alloc memory X
  // 9,15...  useState, list=[] changed by set_list, loaded from memory X 
  const [list, set_list] = useState([]);
  // 5 register effect, callback called every time list change
  // 10,16... effect alread registered, skip
  useEffect(() => 
    // 12,18... list updated because []!==[]
    console.log("useEffect", "list updated"), [list]);
  // 6,11,17... settimeout, callback in 1 sec
  setTimeout(() => 
    // 7,13,19... update memory X, triggering rerender
    set_list(() => []), 1000);
};

// function component is called every render
const TestComponent = () => {
  // 3,8,14...
  const hook = useCustomHook();
  return <span>wowzers</span>;
};

class App extends React.Component {
  render() {
    return <TestComponent />; //2
  }
}

ReactDOM.render(<App />, document.getElementById("root")); // 1

Related Query

More Query from same tag