Theo's Typesafe Cult•11mo ago

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•11mo ago

Can you show us some code

maskmonarch•11mo 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•11mo 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•11mo 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•11mo ago

where's 'useWindowWidth()' from? i'd suggest moving it to a state and update it using effect ?

maskmonarch•11mo 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•11mo 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•11mo ago

yep! running build then start is also reproducing the error so I can directly compare it to running dev

thevalorised•11mo 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•11mo ago

we just decided to double render both versions and hide em with CSS instead super wild though i'll mark it as complete

Gaming

Programming

React not updating the attribute for an HTML element