This is the part of my react application, where I've used a ref.current which is equal to null, then I'm changing it's property, I know like this is surely gonna give me error but in one of my friend's project with same react component WorkPage it's working fine. I'm so confused, is there any sort of fault in mine?
const WorkPage = () => {
const ref = useRef(null);
useEffect(() => {
let element = ref.current;
const rotate = () => {
element.style.transform = `translateX(${-window.pageYOffset}px)`
};
window.addEventListener('scroll', rotate)
return () => window.removeEventListener('scroll', rotate)
}, [])
Surely it will throw error, because you did not assign ref to any DOM element, so ref.current is always null. Make sure to assign it to a DOM element like this:
const WorkPage = () => {
const ref = useRef(null);
useEffect(() => {
let element = ref.current;
const rotate = () => {
element.style.transform = `translateX(${-window.pageYOffset}px)`;
};
window.addEventListener("scroll", rotate);
return () => window.removeEventListener("scroll", rotate);
}, []);
// assign ref to one of your DOM element
return <div ref={ref}>your element</div>;
};
refs is not guaranteed to be set on first render caveats-with-callback-refs so you need to check if the element exists before you try to manipulate it directly in the DOM
if (ref && ref.current) {
// do something
}
On first render ref is undefined. You can use optional chaining operator
let element = ref?.current;