I'm working on a React component that generates a random background image each time a user visits the page. However, I'm facing an issue where the background image updates every time a user types something into an input field. I've tried using the useMemo hook to prevent this behavior but it's not working as expected. Can someone help me identify what I might be doing wrong?
export function RegisterLayout({ children, position = 'justify-center' }) {
return (
...
<img
src={getRandomBackgroundImage()}
alt=''
className='w-100 absolute inset-0 m-auto box-border block h-0 max-h-full min-h-full w-0 min-w-full max-w-full border-none object-cover p-0'
/>
...
)
}
const getRandomBackgroundImage = () => {
const backgroundImages = Array(backgroundImage1, backgroundImage2, backgroundImage3, backgroundImage4)
const randomInt = Math.floor(Math.random() * backgroundImages.length)
return backgroundImages[randomInt]
}
RegisterLayout.propTypes = {
children: PropTypes.array,
position: PropTypes.string
}
export default RegisterLayout