일부 반응.

When I started using useState , I had a misconception that the component is rendered as soon as the setState statement is encountered. I realized this later that React does not render right after the setState statement. Any state update operations are batched together and queued to be computed when the useState is invoked during the next render. The component renders only when the event handler function has executed all the code that it had. Then, during the next render, those state updates that were batched are computed and the value is returned to the state variable. Thus, when the component renders and the hooks are invoked, they return the updated value to the state. Here is an example,

export default function App() {
  const [a, setA] = useState(1);

  const handleBtnClick = () => {
    setA(a + 1);
    setA(a + 1);
    setA(a + 1);
    setA(a + 1);
  };

  console.log("rendered", a);

  return (
    <div className="App">
      <button onClick={handleBtnClick}>do it</button>
    </div>
  );
}

If you run this, you will see that the console.log will run only once and give the value 2 . If you have used React.StrictMode you might get the same output twice. Now, this example brings me to the next point which is the updater function.

In this example, since we are providing an operation inside setA , the setA is converted to setA(1+1) which is converted to setA(2) and then these updates are queued for the next render. Then, during the next render, useState has four state updates and all of them are setA(2) . Why 2 for all of them? That is because every render has it's own state value and this state value does not change for that particular render. You might have noticed that in the line where useState(1) is invoked and we are de-structuring the array into the state value and state update function, we have used const . This means that we cannot change the state value during the same render. The previous render had the value of 1 for a . Therefore, all the setA statements were read as setA(2) . The final value that is returned to the component is 2 .

In case of a scenario where we want to serially update the state unlike the scenario mentioned above where the state was only replaced by the same constant value of 2 on every update, we would use an updater function.

An updater function is a callback function that is supplied to the setA . It's argument is the latest state value prior to this calculation. Here is an example,

const handleBtnClick = () => {
    setA((a) => a + 1); // this returns 2
    setA((a) => a + 1); // this returns 3
    setA((a) => a + 1); // this returns 4
    setA((a) => a + 1); // this returns 5
  };

By giving a callback function, we are telling React to calculate the state value during the next render.

React uses this algorithm to make sure the DOM rendering is as efficient as possible. React has the diffing algorithm through which it narrows down which elements are different so that only those elements are updated in the browser DOM. This process starts with ReactDOM.render() method. This render method creates a virtual DOM. During diffing, the newly created virtual DOM is compared with the virtual DOM before the state update. But first, a bit about virtual DOM.

Virtual DOM is a JSON object that represents the browser DOM. It is extremely fast compared to the browser DOM. It is created from scratch on every state update.

How does React compare the corresponding elements from two different virtual DOMs? For that, let me show you this example,

console.log(
createElement(
<p className="App">some random text</p>
));

This code gives the following output,

React uses the idea of function composition from JS. Components can be composed in a similar manner. Higher order component is one such function that takes the child component as an argument and returns this component wrapped in the parent component. What component is passed as an argument will change depending on the use case. Here is an example,

const FeedPageWrapper = PostsSection => {

    const FeedPage = () => {

        return (
            <div
                className={`bg-off-secondary ${styles.feedPageGrid}`}>
                <div className={`${styles.navDiv} flx flx-maj-end`}>
                    <NavBar />
                </div>
                <PostsSection /> {/*child component used here*/} 
                <div className={styles.extraDiv}>
                    {/* third div empty for now.*/}
                </div>
            </div>
        )
    }
    return FeedPage
}

export default FeedPageWrapper

In the above example, I have a higher order component that takes a component called PostsSection . This component that is passed as an argument will differ based on the page that the user is on. If the user is on bookmarks page, PostsSection will have a list of bookmarked posts. If the user is on user-feed page, PostsSection will have a list of posts personalized for the user.

Apart from the PostsSection , everything else on the page will be the same. Hence, I decided to use the higher order component here. Here is how this component will be used,

const BookmarksFeedPage = FeedPageWrapper(BookmarksSection)

export default BookmarksFeedPage

I have passed BookmarksSection as the argument and BookmarksFeedPage is returned that is exported in the next line. Similarly for the user-feed page,

const UserFeedPage = FeedPageWrapper(UserFeedSection)

export default UserFeedPage

By private routes I mean the routes that are personalized for the users and should only be shown if a user is logged in. For example, in an e-commerce app, wish-list and cart pages are the private routes because they will have different data for different users, unlike the products page.

Here is the algorithm,

1. Check if the current route is private or not.
2. If it is, then check whether the user is logged in or not.
3. If user is logged in, let the user continue with this route.
4. If user is not logged in, re-direct the user to the login page.
5. If the current route is not private, then let the user continue with this route.  

<Route path={ROUTE_CART} element={
          <RequireAuth>
            <Cart />
          </RequireAuth>
} />

In the above code, I have wrapped <Cart/> inside <RequireAuth/> which checks whether the user is logged in or not.
 

const RequireAuth = ({ children }) => {
        const location = useLocation()
        return isUserLoggedIn ? children : <Navigate to='/login' state={{ from: location }} replace />
    }

The above code shows that user's log in status is maintained in the state isUserLoggedIn . <Navigate/>
is a component in react-router@6 which takes a parameter to to navigate to a particular location.
The user's current location is also saved inside the state of Navigate so that after log in, user can be redirected to this location. Here is the code for that,
 

const from = location.state?.from?.pathname
navigate(from, { replace: true })

Setting replace to true means that the login page would be removed from the history stack of the browser. This is helpful when the user presses the back button, the app skips the login page and goes to page that was opened previous to the login page.

Initially I had used normal CSS stylesheets in my projects. This was raising specificity conflicts because every stylesheet had a global scope. CSS modules resolved this issue because it limits the scope of stylesheet to the file that it is imported in.

I have used useRef in one of my apps to make DOM manipulations. The requirement was that whenever a user clicks on any option from the given options, the app should change the background color of that option to red or green depending upon whether the answer was correct or wrong. Here is the first part of logic,
 

optionBtnRefs.current = currentQues?.options?.map((option, i) => optionBtnRefs[i] ?? createRef())

This code is creating an array of refs for each option of the question. Then,
 

<button key={index} ref={optionBtnRefs.current[index]} onClick={() => handleOptionSelect(optionBtnRefs.current[index])} value={option}>{option}</button>

When mapping over the options, I have assigned a ref to each option and the same ref is passed to onClick event handler. Then,
 

if (ref.current.value === currentQues.answer) {
            ref.current.style.background = 'var(--clr-success)'
            setTimeout(() => { ref.current.style.background = 'var(--clr-primary)'; setScore(s => s + 1) }, 1000)

        } else {
            ref.current.style.background = 'var(--clr-error)'
            setTimeout(() => ref.current.style.background = 'var(--clr-primary)', 1000)
        }

Depending upon whether the chosen option is the correct answer or not, I have updated the background of that particular ref . The background is restored to normal after 1 second.

These were some of the things I wanted to share. Hope it helps. Thanks for reading.