React not updating the attribute for an HTML element

I've done all the sanity checks. I'm passing a placeholder to an <input /> element. console.log? prop is changing React dev tools? prop is changing Production? prop is not changing (the above two still show the change) Any ideas what else I can do to debug?
10 Replies
epsilon42
epsilon4216mo ago
Can you show us some code
maskmonarch
maskmonarch16mo ago
const width = useWindowWidth();
const searchPlaceholder = width > 1200 ? 'Search items' : 'Search';
// ...
<input
type="text"
placeholder={searchPlaceholder}
/>
const width = useWindowWidth();
const searchPlaceholder = width > 1200 ? 'Search items' : 'Search';
// ...
<input
type="text"
placeholder={searchPlaceholder}
/>
width is being set correctly, within that ... i've tested a console log it's just not changing the dom
epsilon42
epsilon4216mo ago
Ah sorry i missed the part where is only happening in prod. How odd. is the text always the same if your viewport is > 1200 and you refresh vs < 1200 and refresh? or does it show the correct text?
maskmonarch
maskmonarch16mo ago
in dev, it shows the correct text for the correct screen width in prod, you need to move it to the correct zone, and then back to fix it IE: if the width is 1100, 'Search items' is showing, I need to move past 1200, then back under to get the change to show we make an educated guess at the width for SSR, since, well, i don't have the client. that guess is 1300 (hence why 'Search items') is visible but, then the prop updates (correctly, again, verified multitude of ways), and the component just doesn't update
bakdaddy
bakdaddy16mo ago
where's 'useWindowWidth()' from? i'd suggest moving it to a state and update it using effect ?
maskmonarch
maskmonarch16mo ago
made it myself, it's nothing fancy i'll pseudo code it, it's almost exactly this
const width, setWidth = useState

useEffect (() => {
setWidth(document.body.innerWidth);

const updateWidth = () => {
setWidth(document.body.innerWidth);
}

window.addEventListener('resize', updateWidth);

return () => window.removeEventListener('resize', updateWidth);
}, []);
const width, setWidth = useState

useEffect (() => {
setWidth(document.body.innerWidth);

const updateWidth = () => {
setWidth(document.body.innerWidth);
}

window.addEventListener('resize', updateWidth);

return () => window.removeEventListener('resize', updateWidth);
}, []);
JacobParis
JacobParis16mo ago
Have you verified that production reflects your latest code and there wasn't an issue with deploy or maybe caching that file so it's a stale version?
maskmonarch
maskmonarch16mo ago
yep! running build then start is also reproducing the error so I can directly compare it to running dev
thevalorised
thevalorised16mo ago
I jerry rigged a small test using a code I yanked from stackoverflow. Seems to be working fine in prod as well, at least on my machine. Hope it helps.
import { useEffect, useState } from "react";

export default function Home() {
const size = useWindowSize();
return (
<main className="flex text-white font-semibold text-3xl min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
{size.width > 1200 ? ("Search Items") : ("Search")}
</main>
);
}

function useWindowSize() {
const [windowSize, setWindowSize] = useState<{ width: number; height: number }>({
width: 0,
height: 0,
});
useEffect(() => {
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
window.addEventListener("resize", handleResize);
handleResize();
return () => window.removeEventListener("resize", handleResize);
}, []);
return windowSize;
}
import { useEffect, useState } from "react";

export default function Home() {
const size = useWindowSize();
return (
<main className="flex text-white font-semibold text-3xl min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
{size.width > 1200 ? ("Search Items") : ("Search")}
</main>
);
}

function useWindowSize() {
const [windowSize, setWindowSize] = useState<{ width: number; height: number }>({
width: 0,
height: 0,
});
useEffect(() => {
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
window.addEventListener("resize", handleResize);
handleResize();
return () => window.removeEventListener("resize", handleResize);
}, []);
return windowSize;
}
maskmonarch
maskmonarch16mo ago
we just decided to double render both versions and hide em with CSS instead super wild though i'll mark it as complete
Want results from more Discord servers?
Add your server