How to call a method on every re-render of a component in React?

Question

How to call a method on every re-render of a component in React?

Answer

Use useEffect() without the dependency array.
It runs after every render, including the initial one.

import { useState, useEffect } from 'react';

function Tracker() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    console.log('Component re-rendered. Value:', value);
  });

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={() => setValue(value + 1)}>Increase</button>
    </div>
  );
}

✅ useEffect() (no second argument) → runs after every render.

✅ useEffect(() => {}, []) → runs only once.

✅ useEffect(() => {}, [deps]) → runs when deps change.

Real-World Example

• Logging updates in dev mode
• Animation or side-effect triggers
• Analytics tracking

Quick Practice

Build a component that logs to the console every time the user types in an input field.

Summary

Omit the dependency array in useEffect() to run logic on every render cycle.