The issue with visibility:hidden property and useEffect in Next JS - reactjs

Question

I have an issue with the CSS property visibility: hidden; and useEffect.
I have a simple component with two divs inside of it. Each div has a text. I want to split the letters and add a span for each. It actually works. But if I add visibility: hidden;, the letters don't exist.
Here is my component:
const MyComponent = () => {
const splitRef = useRef(null);
useEffect(() => {
const divs = splitRef.current.querySelectorAll("div");
divs.forEach((item) => {
let newInnerText = "";
const letters = item.innerText.split("");
letters.forEach((letter) => {
newInnerText += `<span>${letter}</span>`;
});
item.innerHTML = newInnerText;
});
}, []);
return (
<>
<div ref={splitRef} style={{ visibility: "hidden" }}>
<div>CONTACT</div>
<div>ABOUT</div>
</div>
</>
);
};
And I display it in my index.js:
export default function IndexPage() {
return (
<div>
<MyComponent />
</div>
);
}
I don't have errors, and without visibility: hidden; I have:
<div>
<div>
<span>C</span><span>O</span><span>N</span><span>T</span><span>A</span><span>C</span><span>T</span>
</div>
<div>
<span>A</span><span>B</span><span>O</span><span>U</span><span>T</span>
</div>
</div>
With visibility: hidden; I have empty divs:
<div style="visibility:hidden">
<div></div>
<div></div>
</div>
I tried to use useLayoutEffect, but nothing changed. And it doesn't matter if I use visibility: hidden; in CSS file. And I need visibility: hidden; for future animations.
What am I doing wrong?

Answer 1

It is recommended to not use querySelector... or any of the getElement... functions in React.
I solved this using a custom component which only returns its children. We map over the children, if the child element is a div we get the text create a span for all letters and return the modified child.
const SpanTextComponent = ({ children }) => {
// map over the children
const childrenWithSpanText = children.map((child) => {
// if the child element is not of type 'div' return the child
if (child.type !== "div") return child;
// get the text from the child
const text = child.props.children;
// map over all the characters in the text
const spans = text.split("").map((letter, idx) => {
// create a new span element with the letter and a key
const span = React.createElement("span", {
children: letter,
key: letter + idx,
});
// return the new span
return span;
});
// copy the child and add the new spans as children
const newChild = {
...child,
props: {
...child.props,
children: spans,
},
};
// return the new child
return newChild;
});
// return the modified children
return childrenWithSpanText;
};
You can use this like
<div style={{ visibility: "hidden" }}>
<SpanTextComponent>
<div>CONTACT</div>
<div>ABOUT</div>
</SpanTextComponent>
</div>