/Javascript/React/Automated counter with react hooks

Automated counter with react hooks

Counter with react hooks

import React, { useState } from 'react';

function Example() {
  // Declaración de una variable de estado que llamaremos "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Source: es.reactjs.org

Automated counter with react hooks

const { useState, useEffect, useRef } = React;

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    let id = setInterval(() => {
      savedCallback.current();
    }, delay);
    return () => clearInterval(id);
  }, [delay]);
}

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

  useInterval(() => {
    setCounter(counter + 1);
  }, 1000);

  return <h1>{counter}</h1>;
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Source: stackoverflow.com

Similar codes

20 votes211 views6 answers
Useeffect react example
Javascript React
10 votes199 views2 answers
React navigation no header
Javascript React
13 votes213 views1 answer
React post request
Javascript React
6 votes227 views2 answers
React native activity indicator
Javascript React
1 vote204 views1 answer
Proactive vs reactive
Javascript React
-2 votes212 views1 answer
Starter react redux project
Javascript React
0 vote222 views1 answer
As it does not contain a package.json file. react
Javascript React
1 vote247 views1 answer
How to detect onend reach of scrollview in react native
Javascript React
0 vote227 views1 answer
React read multiple files with filereader
Javascript React
0 vote249 views1 answer
Login condition if and else in router dom of react jsx
Javascript React