score:0
Accepted answer
welcome to so!
i think you have unintentionally destructured your function using the {}
.
try this:
useeffect(() => {
window.addeventlistener("beforeunload", handleunload);
return () => window.removeeventlistener("beforeunload", handleunload);
}, [handleunload]);
i've added [handleunload]
to the 2nd attribute of useeffect to prevent it adding and removing the event listener upon every state change.
score:2
try using a ref:
const useunload = (fn) => {
const cb = react.useref(fn);
react.useeffect(() => {
const onunload = cb.current;
window.addeventlistener('beforeunload', onunload);
return () => {
window.removeeventlistener('beforeunload', onunload);
};
}, [cb]);
};
and then use this to call
useunload((e) => {
e.preventdefault();
console.log('hey')
alert("hey");
});
Source: stackoverflow.com
Related Query
- eventlistener beforeunload not working in react
- EventListener not working in React component
- onKeyDown event not working on divs in React
- React colspan not working
- React router private routes / redirect not working
- proxy not working for react and node
- lodash debounce in React functional component not working
- React Router v4 routes not working
- React Router v4 Redirect not working
- onclick function is not working in react native application
- onClick not working React js
- React npm start not working : 'No version of chokidar available'
- Scroll View inside view not working react native
- React app not working in Internet Explorer 11
- Lodash debounce not working in React
- React create app hot reload is not always working on linux
- React native textDecoration properties not working on Android
- Using 'ref' on React Styled Components is not working
- Create React App not working
- Create react app, reload not working
- Bootstrap Dropdown not working in React
- React Router with custom history not working
- TouchableOpacity and button not working in react native Modal?
- React router - Nested routes not working
- React router not working after building the app
- React native vector icon not working on current version 0.60
- React Form Component onSubmit Handler Not Working
- Docker Create react app hot reload not working
- React router v4 not working with Redux
- React Error Boundaries not working with React
More Query from same tag
- How to move react event handlers to separate file ,export and then import for reuse in multiple different functional components?
- ReactJS hooks: update state inside condition
- HTML inputs are not updating on handleChange
- REACT ES6 Update state from parents updated props
- Issue getting background color to change
- How to add onClick event in Link
- onChange of Drop down semantic-ui not working
- refresh AgGrid and reselect last selected row
- Add a new type to an existing prop
- React: Rendering second functional component when the first one is updated
- Send data from function component to parent component
- JavaScript - creating a comma delimited string from a lookup in a heavily nested array
- Why doesn't the state change?
- am I mutating object?
- How to define useState variable inside render() reactjs
- D3 Bar Chart + React Hooks - exit().remove() not working
- Why is this handleBlur function with event parameters when the event parameter is not used inside the function?
- Redux is not updating initialState
- How to render a React component (ES6 API) directly using ReactDOM?
- Infinite Re-renders when using Hooks
- Antd 3.26 form validation messages are not rerendering with new value when state/props are changing
- Gradient fill for react-highcharts' line chart
- Gatsby giving error on generating pages from markdown files
- Basename does not seem to be taken into account with matchPath in react router
- The context `router` is marked as required in `Link`, but its value is `undefined`
- How to conditionally route components in React?
- Using return(null) in React
- How do I add data to a dynamic table using Javascript (React.js)?
- ReactJS get values of dynamically created Radio Buttons and pass them into state (usestate)
- React-router having trouble display each of the components on its own