score:0
the issue was importing the wrong lodash function. specifically, i was originally importing:
import { debounce } from 'lodash/fp';
which (from my partial understanding) is a wrapper that better applies to functional programming techniques.
in this case, what i needed was to import:
import { debounce } from 'lodash';
score:1
i assume the mentioned typeerror
was thrown during the useeffect
, since you have not provided any stack trace.
edit thanks to the comment and suggestion by @ori drori:
change the delayedquery
to the following:
const delayedquery = usecallback(debounce(updatequery, 500), []);
this way, you will have a memoized value of your debounced method, which will be a callback anyway, with the available cancel
property.
previous answer (just for reference):
then you can try changing your useeffect
to the following:
useeffect(() => {
const query = delayedquery();
query();
// cancel the denounce on useeffect cleanup
return query.cancel;
}, [userquery, delayedquery]);
explanation
you can have a look at the different types of your methods and callbacks. i‘ll start at the beginning:
usecallback
simply takes any method and returns a new method, which will simply invoke the provided method. it will match the signature of the provided method.- the provided callback, in turn, is a simple arrow function, which returns a
debounce
d method. - the
debounce
d method, according to the lodash docs, can either be called immediately,cancel
ed orflush
ed.
this leads us to the following in your useeffect
:
delayedquery
is a callback.- you call
delayedquery()
, where the hook invokes the arrow function. - the arrow function invokes the
debounce
and returns its value — the debouncedupdatequery
! - but: at this point, your query has not yet been invoked! moreover, since only the return type of your callback is a debounced function, there is no property
delayedquery.cancel
. - and because
delayedquery.cancel == undefined
, you get the mentionedtypeerror
.
score:2
when you call delayedquery()
you return the debounced function, and not the result of calling the debounced function. since debounce
returns a debounced function with the cancel method, and usecallback
accepts a function, define delayedquery
like this:
const delayedquery = usecallback(debounce(updatequery, 500), []);
Source: stackoverflow.com
Related Query
- What causes lodash debouncer "TypeError: Expected a function" error?
- What causes an "React.Children.only expected to receive a single React element child." error in an apollo client rendered component
- What causes the JSS error "<Hook />'s styles function doesn't rely on the "theme" argument"?
- React IE11 async causes Expected } error
- React Using useState/Hooks In HOC Causes Error "Hooks can only be called inside of the body of a function component"
- React this.setState With Arrow Function Causes Error In Console
- Expected an assignment or function call and instead saw an expression error
- There is TypeError (0 , _ColorReducer.color) is not a function error in React + Redux code
- What causes the typescript Module has no exported member .ts(2305) error and how do you fix it?
- Using craco in new react project - what would cause this error ? (UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_VALUE]: ...)
- React component function returning JSX causes error when used in render method of ES6 class React component
- setTimeout function in react causes type error
- Rendering in a map function lead to a JsLint error as Expected an assignment or function call and instead saw an expression?
- Getting Expected an assignment or function call and instead saw an expression no-unused-expressions error when trying to render a component in React
- Syntax error 'Unexpected token, expected }' is thrown after trying to render JSX inside a callback function
- Expected an assignment or function call error in ReactJS
- JSLint is throwing an Error - Expected an assignment or function call and instead saw an expression
- Lodash debounce TypeError: Expected a function react
- Error in React/Redux - Expected an assignment or function call
- Expected an assignment or function call and instead saw an expression error in react if return is not present inside map statement why?
- Passing memoized function down into React Component as a prop causes Typescript error which I can't fix
- Why is react giving me an error that it expected a function call and instead got an expression?
- React & Redux: Infinite Scroll Causes a TypeError: Dispatch is not a Function Error
- getting an error of Expected an assignment or function call and instead saw an expression no-unused-expressions in react
- What does this error means? Render methods should be a pure function of props and state
- Jest throwing TyperError: Expected a function when using lodash pipe/flow
- Expected an assignment or function call and instead saw an expression no-unused-expressions error in React
- Lodash debounce error: Uncaught TypeError: Expected a function
- React JS - Expected to return a value at the end of arrow function ES lint Error
- Expected an assignment or function call error using the componentdidmount function
More Query from same tag
- Managed to connect with Metamask in my website but I can't show the balance
- Use Babel Transform inside of React code
- React.js implement menu [highlight active link]
- NextJS: loading json into getInitialProps in _app.js vs pages and avoiding double calling
- How to use useContext inside a component
- Pomodoro Timer REACTJS not working - useState not updating
- How can I store and subscribe component state to redux store?
- Unexpected mix of '||' and '&&' no-mixed-operators
- How to manipulate context - attach function to context or wrap dispatch in hook?
- Programatically creating pages in Gatsby using Json
- using .find() method to find productId as a parameter base on the productId click
- How to add psuedo element :after using REACT
- can't use makeStyles
- How to access Reagent Component's children elements correctly?
- Does putting state and dispatch into separate context providers prevent unnecessary re-renders?
- How to add class to element in reactjs?
- (React) How to access a specific element that is being mapped and returned?
- React Chartjs 2 display axes above datasets backgroundColor
- React: Passing HOC, to another HOC, gives element type invalid error
- React Js Inline style not working on loop condition
- No 'Access-Control-Allow-Origin' header is present on the requested resource in react js with axios get method
- How to fix Warning: Each child in a list should have a unique "key" prop
- Adding element to Active NavLink React
- How to change a key?
- Nested Routes in DefaultRouter component
- React with Hooks: how to correctly update state after a click event?
- Why does <textarea> in React accept a value attribute but in HTML, it does not?
- How do I set an event listener on the parent component in ReactJS?
- Change back a state to previous value
- Can't resolve 'os' , webpack 5