Minhajul Anwar's Blog

React-16 render: How to know it is render or update(re-render)

React-16 render: How to know it is render or update(re-render)

2023, Feb 14    

One common question arise when debugging simpler functional components with state. Is this dom change is due to the first time render or re-renders(update). Use effect hooks in your advantage. Keep the second argument of the useEffect hook undefined (don’t provide it), and in hook body check for the state value. Is it initial state or not.

useEffect(() => {
        if (!rows.length) {
            console.log("render");
        } else {
            console.log("update");
        }
    });