Languages
[Edit]
PL

React - opó┼║nione wywo┼éanie zwrotne - reset stanu

3 points
Created by:
Gigadude
341

W tym kr├│tkim artykule chcieliby┼Ťmy pokaza─ç, jak napisa─ç funkcj─Ö wywo┼éania zwrotnego (callback), kt├│ra jest wywo┼éywana dopiero po up┼éywie okre┼Ťlonego czasu.

Głównym założeniem poniższego kodu jest zmniejszenie liczby wywołań funkcji callback poprzez anulowanie poprzedniego wywołania, gdy pojawi się nowe zdarzenie handleClick.

Szybkie rozwi─ůzanie:

// ONLINE-RUNNER:browser;

// import React from 'react';
// import ReactDOM from 'react-dom';

const useDelayedCallback = (delay = 100) => {
    const ref = React.useRef();
    React.useEffect(() => {
        // czyszczenie niewywołanego wywołania
        return () => {
          	if (ref.current) clearTimeout(ref.current);
        };
    }, []);
    return (callback) => {
        if (ref.current) clearTimeout(ref.current);
        ref.current = setTimeout(callback, delay);
    };
};

// Przykład użycia

const App = () => {
    const delayCallback = useDelayedCallback(500); // max 1 wysołanie na 500ms
    const handleClick = () => {
      	delayCallback(() => console.log('Klikni─Öto przycisk!'));
    };
    return (
      <button onClick={handleClick}>Kliknij kilka razy!</button>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App/>, root );

Po zako┼äczeniu operacji klikni─Öcia zobaczymy na ekranie┬á komunikat ostrzegawczy┬áKlikni─Öto przycisk!. Gdy klikniemy w przycisk wielokrotnie w kr├│tkim czasie, nast─ůpi tylko jedno zdarzenie klikni─Öcia - zmniejszyli┼Ťmy liczb─Ö wywo┼éa┼ä.

ReactJS (PL)

React - opó┼║nione wywo┼éanie zwrotne - reset stanu
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join