I'm new to Next.js. I'm facing a problem where I am not able to load my new content on the page. Next.js keeps showing the old content which I already deleted from the code. Why does prior content show?
Here is the last code which I delete but still it is showing on the source tab of chrome.
export const UploadWrapper = () => {
// const img__isClicked = ;
const img__isClicked = useSelector(state => state);
useEffect(() => {
console.log('uploadWrapper', img__isClicked);
}, [img__isClicked])
return (
<section>
<UploadDropzone />
{(img__isClicked) ? console.log('hurray I got you') : null }
</section>
)
}
Here is the updated code which is not showing on the page:
export const UploadWrapper = () => {
// const img__isClicked = ;
const img__isClicked = useSelector(state => state.img__isClicked);
useEffect(() => {
console.log('uploadWrapper', img__isClicked);
}, [img__isClicked])
return (
<>
<section>
<UploadDropzone />
</section>
<aside>
{(img__isClicked === true) ? <TagsWrapper /> : null }
</aside>
</>
)
}
If I wish to see fresh content then I have to restart the whole server again.
event the console is showing me
Hurray I got you
It is because new render doesn't happen when you don't change the state inside the component. You could create imgClicked state like this:
export const UploadWrapper = () => {
const [imgClicked, setImageClicked] = useState(false);
const img__isClicked = useSelector(state => state.img__isClicked);
useEffect(() => {
setImageClicked(img__isClicked); // <--- This state change will trigger re-render of the component.
}, [img__isClicked])
return (
<>
{imgClicked ? <TagsWrapper /> : null}
</>
)
}