portratis a basic difference between class and functional component of ReactJS, componentDidUpdate in class component and useEffect in functional component can be used to achieve same thing, but there are some big differences not due to how React defines it but how javascript works. Further, we can use 'useRef' hook to persist data in functional…

ComponentDidUpdate.js

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

class Counter extends React.Component {
  state = {
    count: 0,
  };
  increment = () => this.setState({ count: this.state.count + 1 });
  decrement = () => this.setState({ count: this.state.count - 1 });
  reset = () => this.setState({ count: this.state.count });
// line matters
  componentDidUpdate() {
    setTimeout(() => console.log(this.state.count), 3000); // prints the latest state found for as much time found wihtin 3000ms
  }
// line matters ends
  render() {
    return (
      <div className="Counter">
        <p className="count">{this.state.count}</p>
        <section className="controls">
          <button onClick={this.increment}>Increment</button>
          <button onClick={this.decrement}>Decrement</button>
          <button onClick={this.reset}>Reset</button>
        </section>
      </div>
    );
  }
}

export default Counter;

useEffect.js

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


const Counter = ({ max, step }) => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(0);
// line matters
  useEffect(() => {
    setTimeout(() => console.log(count), 3000); // it will print different each time, cz, function has no instance, for each update it get call 
  }, [count]);
// line matters ends
  return (
    <div className="Counter">
      <p className="count">{count}</p>
      <section className="controls">
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
        <button onClick={reset}>Reset</button>
      </section>
    </div>
  );
};

export default Counter;

useRef.js

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

import "./style.css";

const Counter = ({ max, step }) => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  if (count < countRef.current) console.log("current count is lower");
  else console.log("current count is greater");

  countRef.current = count;
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(0);

  useEffect(() => {
    setTimeout(() => console.log(count), 3000);
  }, [count]);

  return (
    <div className="Counter">
      <p className="count">{count}</p>
      <section className="controls">
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
        <button onClick={reset}>Reset</button>
      </section>
    </div>
  );
};

export default Counter;