score:0
along with newtop
you can return a function that triggers recalculation of the newtop
. similar to how usestate
does. and invoke it onafteropen
.
score:2
indeed, the rules of hooks says:
https://reactjs.org/docs/hooks-rules.html
only call hooks at the top level
don’t call hooks inside loops, conditions, or nested functions. instead, always use hooks at the top level of your react function. by following this rule, you ensure that hooks are called in the same order each time a component renders. that’s what allows react to correctly preserve the state of hooks between multiple usestate and useeffect calls. (if you’re curious, we’ll explain this in depth below.)
this is necessary for react to be sure that hooks will be called on exact the same order in every render cycle.
it seems that modal
would call usetop
only after mounted (opened), i.e. it will probably have skipped the first render, violating the rule of hooks and messing with the order.
one thing you can try:
pass the ref
for your usetop
hook and handle it inside of it. if it's null, don't do anything, if it's already mounted, attach the listener and return the cleanup function.
const panel = () => {
const newtop = usetop(contentref);
<modal pos={newtop} onafteropen={null}><div ref={contentref}>test</div></modal>
};
Source: stackoverflow.com
Related Query
- How to pass state value to a callback function using React Hooks
- How to pass value of state in a function in react using hooks
- How to store react component in state and pass a callback function
- how do i update state in react for updating the value of an object inside an array using array.map function
- how do you pass a React hook useState() 's callback function to a web component's attribute using Lit HTML
- How to pass state from class components to global state when using react hooks for global state management
- How to render component conditionally when leaf value of global state changes using react hooks
- Passing a function as a callback to a React state created with hooks did not reflect new value of variable
- How to use callback function in React hooks when value is submitted?
- How to pass argument to the state callback function in react
- How to test a function call after state receive value inside expression in React function component using Jest
- How to pass Children component state to Parent component state in React using Hooks
- How to pass correct state value into callback function inside useEffect hook?
- How to sync props to state using React hooks : setState()
- how to set state array using react hooks
- How to get the changed state after an async action, using React functional hooks
- How to pass this.props.children using hooks in react
- How do you pass data when using the navigate function in react router v6
- How do I pass all state variables inside react hooks to my child component
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- How can ı pass function with state for react useContext
- How to pass arguments to callback in React + Typescript without new function creation?
- How do I pass a React Context's state through an onClick function created in a method inside that context class?
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How to reset setInterval function using react hooks
- How to use state callback function equivalent on Hooks
- How to set state in react hooks only if state is different from current value
- how to set react parent component state by a async function and then pass this state to child as props?
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- How to update the state of nested json object in react using hooks
More Query from same tag
- semantic ui react mobile friendly components
- Load more when scrolled to bottom in Reactjs
- Pass Dynamic variable as prop from slug
- How to update an array using redux reducer, I want to change a boolean property inside an array of objects to make i true or false
- When routing , component is not rendering in Side page
- Iterating through data with Axios in React JS
- Overcoming lack of refs in stateless components
- Devise DELETE /users/sign_out returns status 204 and doesn't redirect?
- React-router redirect is looping over components in Meteorjs
- JSON array from Express route is undefined in React console
- setState on submit and not onChange
- Using Material-UI's useStyle in helper functions or making helper functions behave like functional components
- How to update URL with map coordinates?
- How to type custom widget for Algolia React instant search?
- Connecting a component with OwnProps using react redux and typescript in the .NET Core 2.0 reactredux template project
- onchange input and set state not working?
- React Collapsible - Add an icon
- In react, how to change the color of a range slider based on the value?
- What does the isVisible property mean in intersectionObeserver API?
- set multiple Search Params in the same render cycle
- Why is concat on array inside this.state not working?
- Heroku "content not from webpack is served from /app/public" despite using all default create-react-app config
- pass parameters to url fetch request javascript
- React: Remove certain html elements from string and normalize
- Creating custom component with <img> for markdown gatsbyjs
- If use async/await with axios.post it become infinite and ignore code below but result of post is successful
- How to make animation on each rerender? (when new props come)
- Why does my bundled file not include all jsx files?
- react web3 parse and store a transaction [receipt value] from returnValues
- Remove previous content when new one is rendered through a condition (React)