/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

2 votes199 views2 answers
React native scrollview detect end
Javascript React
55 votes220 views6 answers
Useref in react
Javascript React
23 votes243 views4 answers
Change port react app
Javascript React
-1 vote198 views1 answer
Set className with ref react
Javascript React
108 votes265 views2 answers
Make react project
Javascript React
1 vote251 views1 answer
Node sass version react
Javascript React
0 vote212 views1 answer
Warning React Hook useEffect has a missing dependency:
Javascript React
2 votes203 views1 answer
Upload image in firebase storage react web
Javascript React
24 votes222 views4 answers
React copy to clipboard button
Javascript React
13 votes203 views4 answers
React native elevation
Javascript React