score:3
Accepted answer
wrap it with react.usememo
and pass a
into the dependency array so it fires only if a
changes.
const getstatusstate = react.usememo(() => {
if (a === 'string_a') {
return 'duplicate';
}
if (a === 'string_b') {
return 'good';
}
return 'n/a';
}, [a]);
score:0
the above answer is valid only if you want to use getstatusstate
as a constant. if you use getstatusstate
as a function it will give uncaught typeerror:
. ie: if you log below using the console
const getstatusstate = react.usememo(() => {
if (a === 'string_a') {
return 'duplicate';
}
if (a === 'string_b') {
return 'good';
}
return 'n/a';
}, [a]);
logs will be:
console.log(getstatusstate); => 'string_a' or 'string_b' or 'n/a'
console.log(getstatusstate()); => uncaught typeerror: getstatusstate is not a function
to solve the above problem and use getstatusstate
as function ie: getstatusstate()
, there are two ways in react:
1 using usememo() and return a function
const getstatusstate = react.usememo(
() => () => {
if (a === 'string_a') {
return 'duplicate';
}
if (a === 'string_b') {
return 'good';
}
return 'n/a';
},
[a]
);
2 using usecallback()
const getstatusstate = react.usecallback(() => {
if (a === 'string_a') {
return 'duplicate';
}
if (a === 'string_b') {
return 'good';
}
return 'n/a';
}, [a]);
Source: stackoverflow.com
Related Query
- React useMemo on a function with return value
- Test return value of function with Jest in React
- How to receive select value in handlesubmit function with formik react js?
- Expected to return a value at the end of this function array-callback-return in React JS
- React hooks, set return value of a function to state causes infinite loop
- Expected to return a value at the end of arrow function with if statement
- How can a function value is displayed in a HTML tag with a return value from addEventListerner click?
- React - Return function value to setState
- React with TypeScript, prompt() return value
- Jest jest.mock function with different return value
- How do I fix a React TypeScript error with the return value of useHotkeys hook not matching the type of the div element ref prop
- return value is not rendering when returned from inside the handleclick() function in react
- if value = X return boolean value with React
- Return value from callback function in React
- React Function to Component and Setting State with Function Return
- How to mock react custom hook return value as a module with Jest
- How to set first value in "useState" function to true or false with "useEffect" function React
- How to get a return value from a React component function prop?
- How to use a state value with map function to display repeat ui in react component
- react warning Expected to return a value at the end of arrow function array-callback-return
- How to pass the return value of a function as a property to a react component
- Mocking react custom hook return value as a module with Jest returns wrong value
- How to get the return value of parent function to child component in react (Using props)
- How can i can change the value of a variable with if/else to return certain div in react
- React useToggle component returning TypeError: Object is not a function or its return value is not iterable
- How to place my dispatch function with React and React Leaflet for return coords lat + lng
- gRPC web with react return value and asynchronous behaviour
- Passing a function as a callback to a React state created with hooks did not reflect new value of variable
- Typescript throws an explicit function return type error when using Suspense with React Router
- React call function with conditional const and return
More Query from same tag
- Ant Design table row class name multiple conditions
- React ajax call when button onClick event using hooks
- React Typescript: Cannot read properties of undefined
- React hooks value renders correctly but not updated inside a callback function of addEventListener
- React-Bootstrap-Multiselect is rendering a non-functional element
- How to enable a button once text is typed in a particular input field in React?
- React return Outlet component when I use render in route
- How to take input to a structured array(nested) using react, Array size will be dynamically decided
- How to do unit testing on inline styling of a component in reactjs?
- Initialstate not updated after success login
- how to wait for a ajax response then define the object
- Null points from drilldown remain on screen on subsequent drilldown of a different location
- Reload chart data in react passed as prop data
- Connecting React frontend and Node.js backend at Heroku
- display icon based on file type
- How does render work with an array of components in React
- useNavigate() may be used only in the context of a <Router> component
- Comparing 'id' via the findIndex method
- Adding event listener to multiple child components or simple parent component
- What is the recommended way of accessing a variable from a different reducer?
- How can I prevent home elements from rendering on every page?
- React npm start show something in new version
- React - Google Maps component not rendering after componentDidMount
- Proper way to extract specific React child element?
- Module not found: Error: Can't resolve '@material-ui/core/styles' (when deploying to heroku)
- Apply CSS theme based on react state
- How can I create a browser router in ReactJS?
- How to compare current user id with the id from one collection in firebase using React
- how to resolve promise pending from async function within express get call
- How to get recurring dates using moment