score:4
React batches the state update. If you will check the state update immediately after updating the state react then you may not get the updated state. You can check the updated state in render method. It should be updated there.
score:0
useState hook is asynchronous, and will not be reflected immediately.. try this:
useEffect(() => {
}, [SidebarClass]);
score:3
I think you add useEffect
hooks to check I explain briefly what did you wrong
when you click your close button closed handler function trigger and setState
function calling at the same time(asynchronous) console.log
statement printed. //'side bar'
in your code, you can't verify your state change or not (only you can verify from the render method) because the closed handler function triggers only one time if you want to check your className
is changed or not from console.log
statement you must need useEffect
hook it will trigger every time after your state
changed so can conform it your className
is changed or not
//only trigger one time
useEffect(()=>{
console.log(SidebarClass);//output 'sidebar'
},[])
//hooks trigger every time after your state changed
useEffect(()=>{
console.log(SidebarClass);
//output 'sidebar'
//output user-side-bar close
})
//only trigger if SidebarClass state changed
useEffect(()=>{
console.log(SidebarClass);
//output 'sidebar'
//output user-side-bar close
},[SidebarClass]);
Source: stackoverflow.com
Related Query
- React hook useState not updating onclick
- React useState hook not updating with axios call
- React hook useState not updating with onSubmit
- React Hook useState Not Updating UI
- Why my usestate hook value is not updating after onClick event with no error at all?
- React useState hook not updating within async useEffect
- React does not change state after updating state in usestate hook (in custom function form)
- react input field not updating useState with onClick event
- React useState hook not consistently updating
- React setState of useState hook successfully updating state, but not re-rendering component
- React hook useState not updating state as desired?
- React useState hook attached to an Input type number not updating value on mouse scroll
- State not updating when using React state hook within setInterval
- Why React Hook useState uses const and not let
- React hooks useState not updating with onChange
- Updating Parent Component State from Child Component with UseState React Hook
- React Hook useCallback not updating State value
- React | props inside UseCallBack not updating inside custom hook
- React hook useLayoutEffect not updating ref parameter on initial render
- React useState hook not triggering re-render of child component
- useState hook not updating a value
- React usestate not updating on first Click Or on First time
- useState react hook does not set the array state
- Method not getting correct useState value despite updating state in React
- React DnD drag item is not updating with useState
- React setState hook not updating dependent element if passed a variable as opposed to explicit text
- React useState not updating
- React Hooks: useState with onClick only updating the SECOND time button is clicked?
- Why is React setState hook not updating immediately?
- React state not updating onclick
More Query from same tag
- How to assign a value to the state with a promise prior to the render method executing
- Error: Cannot find module './img.jpg' on react.js
- Gatsby pages showing / after url
- How to filter data in react?
- How to pass an object through Link
- How to make configuration file to store APIs in React
- Reactjs: Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
- Add URL Validation to TagsInput
- Jest coverage report in html missing coverage values
- Error while trying to integrate React-DateRangePicker into React Project
- Variable is not defined, no-undef; How can I bypass this error?
- React doesn't render array value from firebase and array's length is 0 despite having the value on console
- Delete a value from the list in ReactJs
- Scroll from bottom to top in a text message like modal with React
- to much rerendering in react after using socket io
- How would I render data from a Django model with a React frontend?
- Tag <ErrorMessage> Formik react Style
- Invalid prop `selectRow` of type `string` supplied to `BootstrapTable`, expected `object`
- 502 gateway error when utilizing AWS amplify, cloudwatch gives error on random line?
- Its return type 'Element | undefined' is not a valid JSX element. Type 'undefined' is not assignable to type 'Element | null'
- TypeError: Cannot read property 'setTransform' of null when using Openlayers and Jest + Enzyme
- Display API data using Axios and a list in React
- React-router-dom - Warning: You tried to redirect to the same route you're currently on
- How to use call an item from a library based on props in React?
- toHaveValue returns null while the input's value is 0
- Reactjs video onEnded event not firing
- How to detect Internet Explorer on Next.js (SSR)?
- How can I render the values of an array in sessionStorage?
- Accessing slide elements of react-slick slideshow
- Set acitve classname to multiple items in react js (map) and remove