catt-wuyang / stackoverflow Goto Github PK

import React from "react";

const Button = ({ onClick }) => {
  /*
   * Task 2. How to avoid Button rerenders?
   */
  console.log("Button rerender");

  return <button onClick={onClick}>add</button>;
});

export default function App() {
  const [counter, setCounter] = useState(0);

  /*
   * Task 1. Print to console (console.log) every 1000ms
   * current counter value.
   * Interval of printing should not be interrupted
   * by App rerenders or user interactions, e.g.
   * if user click on "add" button every 700ms, value
   * of counter should be still printing every 1000ms
   */

  return (
    <div>
      <h1>Counter: {counter}</h1>
      <Button onClick={() => setCounter(counter + 1)} />
    </div>
  );
}

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

const Button = memo(({ onClick }) => {
  /*
   * Task 2. How to avoid Button rerenders?
   */
  console.log("Button rerender");

  return <button onClick={onClick}>add</button>;
});

Button.displayName = Button;

export default function App() {
  const timer = useRef();
  const printer = useRef();
  const [counter, setCounter] = useState(0);

  /*
   * Task 1. Print to console (console.log) every 1000ms
   * current counter value.
   * Interval of printing should not be interrupted
   * by App rerenders or user interactions, e.g.
   * if user click on "add" button every 700ms, value
   * of counter should be still printing every 1000ms
   */

  printer.current = () => console.log(counter);

  console.log("app rerender");

  useEffect(() => {
    timer.current = setInterval(() => printer.current(), 1000);

    return () => clearInterval(timer.current);
  }, []);

  const clickHandler = useCallback(() => {
    setCounter((counter) => counter + 1);
  }, []);

  return (
    <div>
      <h1>Counter: {counter}</h1>
      <Button onClick={clickHandler} />
    </div>
  );
}