DEV Community

loading...
Cover image for React Simplified: Improve your SEO with the useRef() Hook

React Simplified: Improve your SEO with the useRef() Hook

uzomezu profile image Kevin Mezu ・3 min read

The React useRef Hook is somewhat of the ugly stepchild of react applications. Considering that it can do the following including:

  1. Store data as a mutable object
  2. Change the DOM without causing Re-Render
  3. Has it's very own mutable element tag ex:

<input ref={} type-"text" name="title"/>

It's quite surprising that we don't often see the useRef hook initialized, isn't it?

There is a good reason why useRef is overlooked and it stems from one of reacts golden rules of Reconciliation:

"The virtual DOM (VDOM) is a programming concept where an ideal, or 'virtual', representation of a UI is kept in memory and synced with the 'real' DOM by a library such as ReactDOM" (Virtual DOM and Internals 2020).

useState is the go to hook for VDOM rendering in react apps. State changes equate to DOM rendering, and execution of JSX and Babel syntax.

Although not the star of the show, useRef can be a nifty tool for capturing information before and after a state change.

SEO and Search Terms

useRef could be a great way to log a user's search history and use that data for SEO in the future when this user logs back in.

useRef will persist a value between renders, when we are not using state, or state not be enough to contain many variables. Take for example the following:

1. Search Bar with search button

Imagine the case of a search bar and search button. We want to grab the exact search term, at the moment the user stops typing, and submit that to server.

      //Input Field to grab user search terms
     <input type="text" placeholder="Search"/>
     //onClick we will call a search function
     <Button onClick={onSearch}>Search</Button>
Enter fullscreen mode Exit fullscreen mode

The best way to get that search term would be useState as it would update the search term without directly changing the DOM.

     const [search, setSearch] = useState('');      
     const onSearch = () => {
                //send information to server
         };
     <input type="text" placeholder="Search" value={search} onChange={(e)=>{setSearch(e.target.value)}}/>

     <Button onClick={onSearch}>Search</Button>

Enter fullscreen mode Exit fullscreen mode

This allows us to grab state change each time the Virtual DOM re-renders. However, what if we need our old searches? Aren't we losing the previous search term each time the DOM re-renders? How do we keep track of any search the user makes during a session?

2. useRef: Capture VDOM without Re-rendering

If we wanted to keep track of information without re-rendering, the useRef function is our best friend. You can capture any data in the VDOM in a way that persists between renders. This means something we searched say 5 renders ago, could be accessed through the useRef mutable object.

To begin we need to set useRef to something we can use to keep track of every search term. An array would suit this situation best.


const hashTags = useRef(new Array());

Enter fullscreen mode Exit fullscreen mode

The .current property of useRef is what allows us to get the current value of our ref.We'll use another ref for the prevSearch term, and push this with .push(prevSearch) to the hashTags array.

  const [search, setSearch] = useState('');
  const hashTags = useRef(new Array());
  const prevSearch = useRef();

 const onSearch = () => {
  prevSearch.current = search; 
  hashTags.current.push(prevSearch.current);
  console.log(hashTags.current);
 }

Enter fullscreen mode Exit fullscreen mode

The Result

  • real time log of user's keywords
  • easy way to grab all DOM inputs without re-rendering
  • A reusable solution that doesn't affect state change

Alt Text


Resources

Virtual DOM and Internals. (n.d.). Retrieved December 12, 2020, from https://reactjs.org/docs/faq-internals.html

Discussion (0)

pic
Editor guide