useEffect() - What You Need to Know for Acing Tech Interviews!

Introduction

useEffect() is one of the React Hooks which, by definition, allow functional components to access state and lifecycle features. They are used to handle side effects, operations that should be separated from the main rendering process. Example of side effects include data fetching, manipulation of the DOM and subscriptions.

The common rules

Hooks must be used in React function components.
Only call them at the top level of a component and avoid conditional use!
Follow the naming convention ("useHook").

Examples

Use in class components (incorrect)

import React, { useState } from 'react';

class SSComponent extends React.Component {
  constructor(props) {
    super(props);
    const [number, setNumber] = useState(0);  // Incorrect: Hooks cannot be used here!!
  }

  render() {
    return <div>{`The count is ${count}`}</div>;
  }
}

Top Level Use (correct):

function SSComponent() {
  const [name, setName] = useState('');  // Correct: at the top level
  useEffect(() => {
    document.title = name;  // Correct: at the top level
  });

  return <input value={name} onChange={e => setName(e.target.value)} />;
}

Used inside conditional (incorrect)

function SSComponent({ isLogged }) {
  if (isLogged) {
    useEffect(() => {   // Incorrect: inside a conditional block
      console.log('The above will cause issues');
    });
  }
  return <div>Skill Society</div>;
}

How it works - Show me some examples

Let's start with the basic syntax:

useEffect(effect, dependency);

Effect: F(x) containing the logic.
Dependency: When presents illustrate in an array format which dependencies are watched. If any of the dependencies changes, the useEffect will trigger the F(x).

Default Behaviour (execute every time)

It execute every time your component is rendered

useEffect(() => {
  console.log('Runs on every render!');
});

Execute once (at component mount)

This emulate the componentDidMount executing the function as soon as the component is initially rendered.

useEffect(() => {
  console.log('Runs only on the first render!');
}, []);

### Execute when a dependency is updated
`const [website, setWebsite] = useState('https://skillsociety.com.au');

useEffect(() => {
  console.log(website); //Run on first render + anytime the dependency value changes!
}, [website]);

Execute only when a dependency is updated


import { useEffect, useRef, useState } from "react";

export default function App() {
  return (
    <div>
      <h1>Hello Dev.to Reader!</h1>
      <h2>Visit our website Skill Society</h2>
      <a href="https://skillsociety.com.au>SkillSociety</a>
      <MyComponent value={2} />
    </div>
  );
}

function MyComponent({ value }) {
  const isInitialMount = useRef(true);

  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false; // Set to false after the first render
      console.log("initial mount, put logic here if you want to execute when the component is rendered");
    } else {
      // This code runs only when `value` changes, not on initial mount
      console.log("Value updated to:", value);
    }
    // This setup ensures the effect is ignored on the initial mount,
    // but runs on subsequent updates to the dependency `[value]`.
  }, [value]); // Dependency array includes only `value`

  return <div>Value is: {value}</div>;
}

With CleanUp functionality

const [count, setCount] = useState(0);

useEffect(() => {
  const intervalId = setInterval(() => {
    setCount(prevCount => prevCount + 1);
  }, 1000);

  return () => clearInterval(intervalId); // Cleanup function to clear the interval
}, []); // Empty dependency array to set up the interval once

The above are just the basic concepts!

Yes, we're only covering the essential concepts you must know for a tech interview. If you want to learn more about advanced dependency management, detailed lifecycle control, optimisation techniques, error handling, and concurrency issues, please DM me on LinkedIn!

Follow me on LinkedIn

Blog