Running Logic on Mount with useEffect

Snippet

Running Logic on Mount with useEffect

The useEffect hook allows you to perform side effects in functional components. Using an empty dependency array ensures the effect runs only once when the component first appears.

snippet.js

javascript

import { useEffect } from 'react';
 
function WelcomeLogger() {
  useEffect(() => {
    console.log('Component has mounted!');
  }, []);
 
  return <h1>Check the console!</h1>;
}

react

Breakdown

useEffect(() => { ... }, [])

The first argument is the function to run. The second argument [] means it only runs once after the initial render.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Running Logic on Mount with useEffect

Related