I’m creating a search component which becomes fixed on mobile devices and is then activated (translated to the center of the screen) by a button. Changing the visibility of certain elements can be of course done using CSS media queries (I’m ok with leaving HTML elements in the DOM), but I’m wondering what about the states that are still present in the component when the viewport is larger? If the user starts browsing on desktop device, then these states will probably never be needed and they will be just there sitting. I was thinking of maybe creating another component which looks almost the same, but doesn’t hold these two mobile-related states. Then the parent component would check the viewport size and if the viewport size matches the mobile devices, it will show the component with these mobile-related states. However, on the other hand, these are just two simple states and using viewport-checking state in parent and then conditionally rendering mobile or desktop version of component might be more wasteful in terms of device’s resources. What approach is recommended?
My code:
const Search = () => {
const [value, setValue] = useState("");
const [showMobileSearch, setShowMobileSearch] = useState(false);
const inputRef = useRef<HTMLInputElement | null>(null);
const toggleShowMobileSearch = () => {
setShowMobileSearch((prev) => !prev);
if (showMobileSearch) setValue("");
else if (inputRef.current) inputRef.current.focus();
};
const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
return (
<_Search role="search">
<SearchWrapper $active={showMobileSearch}>
<SearchFormWrapper $active={showMobileSearch}>
<SearchForm>
<InputButton text="ser" />
<SearchInput
ref={inputRef}
value={value}
onChange={handleSearch}
placeholder="Search for songs, albums and artists"
/>
<InputButton text="del" />
</SearchForm>
<Button text="mic" />
<CloseMobileSearchButton
text="clo"
onClick={toggleShowMobileSearch}
/>
</SearchFormWrapper>
</SearchWrapper>
<OpenMobileSearchButton text="mob" onClick={toggleShowMobileSearch} />
</_Search>
);
};