c8fa284854
This pull request fixes `<Image />` not updating when new props are passed by removing external DOM mutations and relying on React to do it instead. As an added bonus, I've extracted the intersection observer from both the `<Image />` and `<Link />` component, as their instance can be shared! The increase in size is minor (+3B), and actually a decrease for apps using both `<Image />` and `<Link />`. --- Fixes #18698 Fixes #18369
23 lines
512 B
JavaScript
23 lines
512 B
JavaScript
import React, { useState } from 'react'
|
|
import Image from 'next/image'
|
|
|
|
const Page = () => {
|
|
const [toggled, setToggled] = useState(false)
|
|
return (
|
|
<div>
|
|
<p>Update Page</p>
|
|
<Image
|
|
id="update-image"
|
|
src={toggled ? '/test.png' : '/test.jpg'}
|
|
width="400"
|
|
height="400"
|
|
></Image>
|
|
<p id="stubtext">This is the index page</p>
|
|
<button id="toggle" onClick={() => setToggled(true)}>
|
|
Toggle
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Page
|