/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

0 vote244 views1 answer
React native pure component vs component
Javascript React
15 votes233 views8 answers
React bootstrap
Javascript React
1 vote226 views1 answer
React current path
Javascript React
2 votes255 views1 answer
React promises
Javascript React
0 vote271 views1 answer
Search Filter with React Native on FlatList
Javascript React
16 votes233 views1 answer
DangerouslySetInnerHTML did not match error in React
Javascript React
1 vote243 views1 answer
Class Component in ReactJS
Javascript React
18 votes293 views3 answers
How To Hide React Navigation Header in React Native
Javascript React
22 votes232 views3 answers
How to define array in react js
Javascript React
68 votes242 views3 answers
React add inline styles in react
Javascript React