React：如何从 useEffect 内部返回 useRef.current.value？

Question

I was planning to use useRef.current.values in a project, and a guide I was reading recommended returning values from inside useEffect. The guide showed the setup, but no example for using values.

I'm stumped on how to get useRef values out of useEffect. I see values inside the pageRef.current object via console.log that get populated after page render. useEffect complained when I tried to return the values - the error message says you can only return a function.

Here's the Nav component I am using ( Nav is the App entry point and the pages are rendered in PageContainer at the bottom, hookrouter-style):

const Nav = () => {
    const pageRef = useRef({});
    const [isOpen, setIsOpen] = useState(true);
    const routeResult = useRoutes(directions);

    useEffect(() => {
        if (pageRef.current) {
            let pageHeight = pageRef.current.currentHeight;
            let pageWidth = pageRef.current.currentWidth; // etc.
            console.log(pageRef.current.currentWidth); // example
            return pageWidth; // error, can only return a function
        }
    }, [pageRef]);

    console.log(pageRef.current.clientWidth);

    const backgroundClickHandler = () => {
        if (isOpen) {
            setIsOpen(!isOpen);
        }
  };
  
  const toggleClickHandler = () => setIsOpen(!isOpen);
  
    return (
        <div>
            <ToggleContainer>
                <button
                    className='fas fa-bars fa-2x'
                    onClick={toggleClickHandler}
                ></button>
            </ToggleContainer>
            {isOpen && <NavWrapper>{NavList()}</NavWrapper>}
            <ClickContainer onClick={backgroundClickHandler} isOpen={isOpen}>
                <PageContainer ref={pageRef}>
                    {routeResult || <NotFoundPage />}
                </PageContainer>
            </ClickContainer>
        </div>
    );
};

export default Nav;

So my questions are:

1. Why retrieve useRef values from inside useEffect, instead of directly accessing pageRef.current.value ? Isn't it returning info from the DOM, not updating the DOM directly? Returning a current.value a side-effect?

2. Values inside useEffect for pageRef aren't being updated when resizing the window, even though pageRef is inside the array which useEffect is supposed to watch (?).

3. What's an example of a function to return a pageRef.current.value in this context?

4. Is there a better way to go about what I'm trying to accomplish here?

Answer 1

Answers to your questions:

1. Your useEffect basically says that whenever pageRef changes, call this function. If done outside, it will call do your tasks on every render instead of doing the whenever pageRef values is changed. Also, in initial renders, it may give undefined values.

 useEffect(() => { // called whenever pageRef is changed
        if (pageRef.current) {
            let pageHeight = pageRef.current.currentHeight;
            let pageWidth = pageRef.current.currentWidth; // etc.
            console.log(pageRef.current.currentWidth); // example
        }
    }, [pageRef]);

    console.log(pageRef.current.clientWidth); // called on every render, be it because of pageRef change or not

2. Values inside pageRef will not change on resizing windows as you have not attached any resize event listeners to the DOM element

3. you can only return a function in useEffect which basically says that before running the same next time, run this function before. So it perfectly helps in cleanups or unsubscribing from events.

4. You can achieve what you are trying to accomplish with your way, you only need to attach resize event listener to the requrired DOM element and handle the same.