I want to update the text inside a <p> tag depending on the screen size. There are two approaches that come to mind:
- Include the text like this:
<p>
<span className="one">text one</span>
<span className="two">text two</span>
</p>
Then adjust the CSS using media queries, such as:
@media (max-width: 481px) {
.one {
display: none;
}
.two {
display: inline;
}
}
The other option is to use React/JS directly within the component:
let innerText;
React.useEffect(() => {
if (window.innerWidth <= 481) {
innerText = 'text one';
} else {
innerText = 'text two';
}
}, [window.innerWidth]);
return (
<p>{innerText}</p>
);
Which approach is more efficient for this scenario? What is considered to be best practice? Are there any other methods that I should consider? I worry about causing multiple re-renders with the React method when resizing the screen, but also about rendering unnecessary spans with the CSS method.