score:0
i found the root of the problem. sometimes you are too focused on something and you forget the little details of useeffect. it is always dangerous to provide objects as dependency arrays to useeffect. the dependency array values should be simple values. so now i introduced a new state (flag, setflag) with just boolean values and i make the second useeffect just to follow that simple value. everything is working just fine now.
import react, {useeffect, usestate} from 'react'
import i18n from '../../i18n'
import styled from 'styled-components'
import {createglobalstyle} from 'styled-components'
import {useselector} from 'react-redux'
const notificationstyle = createglobalstyle`
@media (max-width: 500px) {
.notification_mssg {
left: 10px;
}
}
`
const container = styled.div`
color: white;
position: fixed;
top: ${(props) => props.top}px;
right: 16px;
z-index: 2000;
transition: top 0.5s ease;
`
const notificationicon = styled.div`
float: left;
font-size: 27px;
width: 40px;
height: 40px;
text-align: center;
`
const notificationmessage = styled.span`
padding: 10px;
line-height: 40px;
`
function notificationalertroot(props) {
const create_notification = useselector((state) => state.notifications.create_notification)
const {message, code} = create_notification.success_info
const [showstate, setshowstate] = usestate({top: -100, msg: message, bgcolor: '#444'})
const [flag, setflag] = usestate(false) // when you follow the showstate at the second useeffect you have an infinite loop. because it is an object.
// show notification
useeffect(() => {
setshowstate({top: 96, msg: i18n.t(message), bgcolor: backgroundcolor(code)})
setflag(true)
}, [message, code])
// hide notification after 2 seconds
useeffect(() => {
const timerid = settimeout(() => {
setshowstate({top: -100,msg: '', bgcolor: `#ffffff00`})
setflag(false)
}, 2000)
return () => {
cleartimeout(timerid)
}
}, [flag]) // showstate
const notificationicon = (bgcolor) => {
switch (bgcolor) {
case '#32c786':
return (
<notificationicon style={{background: '#2aa872'}}>
<i classname="zmdi zmdi-info" />
</notificationicon>
)
case '#ffc721':
return (
<notificationicon style={{background: '#fabb00'}}>
<i classname="zmdi zmdi-alert-triangle" />
</notificationicon>
)
case '#ff6b68':
return (
<notificationicon style={{background: '#ff4642'}}>
<i classname="zmdi zmdi-alert-circle" />
</notificationicon>
)
default:
return <span></span>
}
}
const backgroundcolor = (code) => {
switch (math.floor(code / 100)) {
case 2:
return '#32c786'
case 3:
return '#ffc721'
case 4:
return '#ff6b68'
case 5:
return '#ff6b68'
default:
return '#444'
}
}
return (
<react.fragment>
<notificationstyle />
<container
classname="notification_mssg"
top={showstate.top}
style={{background: showstate.bgcolor}}
>
{notificationicon(showstate.bgcolor)}
<notificationmessage>{showstate.msg}</notificationmessage>
</container>
</react.fragment>
)
}
export default notificationalertroot
score:1
i guess the problem comes from your dependency array. your useeffect
is dependent on showstate
and each time, you are calling setshowstate
in your useeffect
when setshowstate
is called showstate
changes and then again, your useeffect
gets invoked(it is dependent on showstate
), and again setshowstate
is called and ...
infinity loop!
Source: stackoverflow.com
Related Query
- setTimeout runs indefinetly inside useEffect
- React setTimeout and setState inside useEffect
- setTimeout inside useEffect with useState
- Can't seem to get test coverage for a setTimeout action dispatched inside of an useEffect
- Can I set state inside a useEffect hook
- React hook useEffect runs continuously forever/infinite loop
- Is it possible to use a custom hook inside useEffect in React?
- React. this.setState is not a function inside setTimeout
- Testing api call inside useEffect using react-testing-library
- React Hooks - Ref is not avaiable inside useEffect
- How to test useEffect with async function and setState inside
- useEffect runs infinite loop despite no change in dependencies
- React batch updates for multiple setState() calls inside useEffect hook
- state inside useEffect refers the initial state always with React Hooks
- Why useEffect hook runs before the DOM is loaded?
- React: scrollIntoView only works inside of setTimeout
- Define a function inside useEffect or outside?
- How to dispatch an redux action to load data inside useEffect on page load
- setTimeout runs its callback codes much slower than without it
- Update state within listener that is inside useEffect
- React useEffect clean up function runs multiple times?
- Interval inside React useEffect - store it in a useRef Hook to preserve value overtime warning
- setTimeout not clearing with React useEffect hook on mobile devices
- Call a Redux Action inside a useEffect
- Access old state to compare with new state inside useEffect react hook with custom hooks usePrevious
- Setting the default value inside the input field in the antd library after calling the function in useEffect
- React setInterval in useEffect with setTimeout delay
- Difference between code inside useEffect with no dependencies and outside of it?
- Using reducer state inside useEffect
- Not able to mock a function inside useEffect
More Query from same tag
- React Textarea with state can't be update
- What is the correct way to handle an accesstoken with react to secure routes?
- React redux shows previous state old data before fetching new data
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- componentDidUpdate prevProps gives me current / new props
- What do I need to do that appendChild and addEventListener is going to work?
- Second container not adjusting to full height of the first container in React app
- handleActive Function is undefined in my component
- React - reusable Redux hook slice issue (Redux Toolkit, Typescript)
- Simple Conditional Routing in Reactjs
- React - Running count of components in children (e.g. for footnotes)
- Make second api call when there is no error on the first using Axios in React
- Same function doesn't work on different platform in React
- Keys vs shouldComponentUpdate, how are they related, are they not the same?
- Styling nested rows conditionally in Handsontable
- CSS : Body border with rounded corners even after scrolling
- Why does my HOC NotEmpty not work when access property?
- How can I use different dynamic slug url for same component React js?
- React js rerender of large number of components in a form
- React render table - match body data to heading data order?
- TypeError: TestsList is not iterable
- Rect doesn't visualized after append
- REACT - Pagination does not works as I expected
- parse data from firebase in react render
- Material UI's RaisedButton causing "Element type is invalide error"
- How deep do I need to clone my state when only updating parts of the state?
- Execute function when I apply filter, material-table
- on using rxjs to update props of a react functional stateless component
- Importing an instantiated class sets global prototype
- Combinations of specific elements in array