react constructor-like in functional component

Question

With react hooks now we can have state in a functional component, so i tried rewriting a small project i had previously written using class components, in the process I encountered a problem that I might have an explanation for but i want to be sure.

Brief overview

So in my App.js component i fetch data then pass it as props to a list component that renders the data in steps, First it displays 4 items then as you scroll more gets added.

The way i did that is, the api gives me an array of 30 items, i pass all of it to a list component where i have an underlying array that i keep pulling from items and update the state so it renders.

Example code

class List extends Component {
    constructor() {
        super();
        this.underlyingArray = [];
        this.state = {
            visibleList: []
        }
    }
    componentDidUpdate() {
        // checks if we have data 
        // populates the underlyingArray only if it's empy
    }

    render() {
        return this.state.visibleList
    }
}

In the constructor i initialize the underlyingArray to be empty then i populates it onces there's data.

---

Now when i tried converting all that to a functional component the underlying array keeps getting cleared or initialized every time there's a state change

Example code

const List = (props) => {
    let underlyingArray = [];
    let [visibleList, setVisibleList] = useState([])

    useEffect(() => {

        // checks if we have data 
        // populates the underlyingArray only if it's empy

    }, [props.data]); // runs the above code when we receive data from the api call

    return visibleList;
}

So i tried putting a console.log() at the top of the function and found out that whenever there's a state change i see that logging message so i looked up a solution for this and found some answers on SO suggested using the useRef() hook which works.

However this made question performance issues if i have several calls to functions that do some housekeeping stuff at the top thinking that i will only run once, and since hooks came to enable the use of state in a functional component, where's the constructor-like functionality ?

So, Is there a constructor-like functionality to initialize the component besides using useRef() because if it's supplied a function it'll still run on every render.

Answer 1

You can pass an empty array as the second argument of useEffect:

useEffect(() => {
  // Some initialization logic here
}, []);

That way the effect will be used only when the component is mounted or unmounted.

Answer 2

You can use useMemo to demonstrate as constructor for functional component. Some people suggested to use useEffect BUT it will be invoked after render.

useMemo(() => {
  console.log('This is useMemo')
}, []);