Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
debouncedEffect3.jsx
function ChildComponent({ value, setValue }) {
function makeApiCallRaw(value) {
console.log("make api call with value", value);
}
const debouncedmakeApiCall = React.useCallback(
debounce(
value => {
makeApiCallRaw(value);
},
2000,
{ trailing: true }
),
[]
);
return (
<input
defaultValue={value}
value={value}
onChange={e => {
setValue(e.target.value); // Has to be non-debounced
debouncedmakeApiCall(e.target.value); // Has to be debounced
}}
/>
);
}
function App() {
const [value, setValue] = React.useState("");
return (
<div>
Hello World
<ChildComponent value={value} setValue={setValue} />
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment