Debounce and Throttle Callbacks with React Hooks | Kyle Shevlin

PHOTO

Fri May 13 2022 15:39:57 GMT+0000 (Coordinated Universal Time)

Saved by @Floony #jsx

function Search({ onSearch }) {
  const [value, setValue] = React.useState('')

  // This is the solution
  const debouncedSearch = React.useMemo(
    () =>
      debounce(val => {
        onSearch(val)
      }, 750),
    [onSearch]
  )

  const handleChange = React.useCallback(
    e => {
      setValue(e.target.value)
      debouncedSearch(e.target.value)
    },
    [debouncedSearch]
  )

  return <input type="text" value={value} onChange={handleChange} />
}

https://kyleshevlin.com/debounce-and-throttle-callbacks-with-react-hooks

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

Hooks

@Floony

Debounce and Throttle Callbacks with React Hooks | Kyle Shevlin Updater function that spreads current state object and adds a key value pair Using on Input and onBlur to set values and submit them to Redux useReducer Hook with TypeScript Updating array useState Use Immer with useState Hook reactjs - React - How do you cleanup useEffect() after fetching data and setting a state with that data? - Stack Overflow

React.js cheatsheet

class Hello extends Component {
  constructor (props) {
    super(props)
    this.state = { visible: true }
  }
}

React.js cheatsheet

class Hello extends Component {
    state = { visible: true }
  }
}

React.js cheatsheet

React.createClass({ ... })
React.isValidElement(c)

React.js cheatsheet

ReactDOM.render(<Component />, domnode, [callback])
ReactDOM.unmountComponentAtNode(domnode)

MyCo.propTypes = {
  list: PropTypes.array,
  ages: PropTypes.arrayOf(PropTypes.number),
  user: PropTypes.object,
  user: PropTypes.objectOf(PropTypes.number),
  message: PropTypes.instanceOf(Message)
}

React.js cheatsheet

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React.js cheatsheet

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

React.js cheatsheet

class TodoList extends Component {
  render () {
    const { items } = this.props

    return <ul>
      {items.map(item =>
        <TodoItem item={item} key={item.key} />)}
    </ul>
  }
}

React.js cheatsheet

MyCo.propTypes = {
  list: PropTypes.array,
  ages: PropTypes.arrayOf(PropTypes.number),
  user: PropTypes.object,
  user: PropTypes.objectOf(PropTypes.number),
  message: PropTypes.instanceOf(Message)
}

#javascript #reac #jsx

React example - chaging output and inline styling depending on condition

// will need a HTML page with "root"

import React from "react";
import ReactDOM from "react-dom";

const date = new Date();
const currentTime = date.getHours();
const currentMins = date.getMinutes();

let greeting;

const customSyle = {
  color: ""
};

if (currentTime < 12) {
  greeting = "good morning";
  customSyle.color = "red";
} else if (currentTime < 18) {
  greeting = "good evening";
  customSyle.color = "blue";
} else {
  greeting = "good night";
  customSyle.color = "puprle";
}

ReactDOM.render(
  <h1 className="heading" style={customSyle}>
    {currentTime + ":" + currentMins + " " + greeting}
  </h1>,

  document.getElementById("root")
);

How to Refresh a Page in React

import React from 'react';

function App() {
  
  function refreshPage() {
    window.location.reload(false);
  }
  
  return (
    <div>
      <button onClick={refreshPage}>Click to reload!</button>
    </div>
  );
}

export default App;

getting a file as local image and displaying it

const React = require('react')
class Upload extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      file: null
    }
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    this.setState({
      file: URL.createObjectURL(event.target.files[0])
    })
  }
  render() {
    return (
      <div>
        <input type="file" onChange={this.handleChange}/>
        <img src={this.state.file}/>
      </div>
    );
  }
}
module.exports = Upload

#jsx #react.js #inlinestyling

Inline style jsx / react

<section style={{backgroundColor: color}}></section>

React onChange Events (With Examples) - Upmostly

  ... 
  
  return (
    <input name="firstName" onChange={handleChange} />
  );
  
  ...

React onChange Events (With Examples) - Upmostly

import React from 'react';

function App() {

  function handleChange(event) {
    console.log(event.target.value);
  }
  
  return (
    <input name="firstName" onChange={handleChange} />
  );
}

export default App;

Browse more snippets >>