prdxs

export default function useData(initData) {
  const [data, setData] = useState(initData);
  useEffect(() => {
    const intervalId = setInterval(async () => {
      const newData = await fetch('https://data-api.com/getData').then(response => response.json());
      setData(newData);
    }, 50000);
    return () => {
      clearInterval(intervalId);
    };

prdxs

const PerfClicksButton = memo(({ className, style, children }) => {
  const [clicks, setClicks] = useState(0);
  const handleClick = useCallback(() => setClicks((clicks) => clicks + 1), []);
  return (
    <button
      className={clsx('ClicksButton', className)}
      style={style}
      onClick={handleClick}
    >
      {children} {clicks}

prdxs

class PerfClicksButton extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
    };
  }
  handleClick = () => {
    this.setState(({ clicks }) => ({
      clicks: clicks + 1,

prdxs

class PerfClicksButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
    };
  }
  shouldComponentUpdate(nextProps, nextState) {
    const sameClassName = nextProps.className === this.props.className;
    const sameStyle = nextProps.style === this.props.style;

prdxs

class StoppableClock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: new Date().toLocaleTimeString(),
      isRunning: true,
    };
  }
  componentDidMount() {
    this.intervalId = setInterval(() => {

prdxs

class StoppableClock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: new Date().toLocaleTimeString(),
      isRunning: true,
    };
  }
  componentDidMount() {
    this.intervalId = setInterval(() => {

prdxs

function StoppableClock({ className, style }) {
  const [time, setTime] = useState(new Date().toLocaleTimeString());
  const [isRunning, setIsRunning] = useState(true);
  const toggle = useCallback(() => {
    setIsRunning(isRunning => !isRunning);
  }, []);
  useEffect(() => {
    if (isRunning) {
      const intervalId = setInterval(() => {
        setTime(new Date().toLocaleTimeString());

prdxs

function Clock({ className, style }) {
  const [time, setTime] = useState(new Date().toLocaleTimeString());
  useEffect(() => {
    setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
  }, []);
  return (
    <span
      className={clsx('Clock', className)}

prdxs

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: new Date().toLocaleTimeString(),
    };
  }
  componentDidMount() {
    setInterval(() => {
      this.setState({ time: new Date().toLocaleTimeString() });

prdxs

function ClicksButton({ className, style }) {
  const [clicks, setClicks] = useState(0);
  const handleClick = useCallback(() => setClicks((clicks) => clicks + 1), []);
  return (
    <button
      className={clsx('ClicksButton', className)}
      style={style}
      onClick={handleClick}
    >
      Clicks {clicks}