Sitecore headless - Few use cases for useEffect hook in the application head

If you use a framework like ReactJS, you probably don't need an introduction about hooks. Out of  all the hooks, useEffect will sweep your feet off the floor. This is because of useEffect' power and capability to run side effects. Personally speaking, useEffect seemed like a swiss knife to me since anything I couldn't resolve using CSS / Javascript especially in lines of DOM manipulation, i normally looked upto useEffect and it never failed to disappoint me. In this note, I've covered a few such scenarios so that in future, when you encounter complex scenarios, you would then know which hook to approach as a last resort. Note that most of the scenarios listed here are technically similar since they deal with adding/removing css or some kind of html DOM manipulation but I wanted to cover this as a note in order to look at the variety of scenarios possible.

Now, the advantage of ReactJS is, you can either add the useEffect code to layout.tsx as-is (not liked by purists since it litters the code) or follow a cleaner approach of creating a component or adding as a hook and then invoking that piece of code as an element in the layout.tsx.  I've covered all three approaches here in the note.

Scenario-1:

Picture a two-column desktop layout that must act responsive and become a single column layout in case of smaller devices as depicted below :

In such a context, you also want to be able to specify an order so that you can interject the right column elements into left column as per your wish. This is an excellent case for useEffect. Here is the sample code that can accomplish this specific DOM manipulation.

////

////

Hook invocation in layout.tsx:

Necessary import:

Demo:

Scenario-2:

Since z-index of hamburger menu is usually higher than other elements in the page, if hamburger menu is open, but then user is able to traverse the page present in the background, automatically close the hamburger menu to display the scrolled page. Here is the useEffect code for this scenario.

****

****

Demo without above code:

Scenario-3:

There are paginated results and user clicks on the page number, once the user clicks on the page number, the cursor must auto-scroll to the top of the page or a specific anchor while displaying the concerned page results. Here is useEffect at work for the scenario.

Scenario-4:

Assume that you have a Sitecore form, for instance, Register User. It is common to have mandatory field validation or validations like Australian phone number format, email format etc. By default, Sitecore form mandatory messages appear beside the control and mess-up the alignment. Here is an approach wherein I used useEffect and a toast for each control that appears and disappears non-intrusively. According to me, this is the pick of this list.

/src/components/FormFieldValidators.tsx:

Since this is a component now, add it in the body of layout.tsx:

Demo:

Scenario-5:

It is so common to have a sticky enquire button in the bottom of all the pages in the site. layout.tsx is a perfect place to add such a button. I've taken the liberty to hard-code the html code in the tsx file since in my case, I don't see any need to change the styles or the button text. However, you can pass layout service data or theme from layout.tsx to the hook itself. Here is the sample code for the sticky enquire button. This is again a component similar to the above scenario.

Demo:

Scenario-6:

The Sitecore redirect item i had setup for a menu item used anchor tag but this anchor tag wasn't working as expected. In other words, when i clicked on the menu item in the page (with the published changes), the anchor tag wasn't getting appended as expected. So, I intercepted the item and added the hash tag to the url on-the-fly with the help of useEffect. Although this would be better resolved via Sitecore by ensuring that the anchor tag is suffixed properly to the url (unsure if it is a Sitecore bug), useEffect is the only quick solution I had on hand. Here is the code for this scenario.

****

****

Conclusion: Hopefully this note must have given you an idea of different scenarios where hooks can be useful. Next time when you have DOM manipulation issues and have tried all you can with CSS class styling, remember that there is useEffect to the rescue!