Optimizing FanAI's Dashboard - Using React Hooks to Improve Visualization

This article was written by Travis Dunn, Senior Frontend Engineer | R&D at FanAI, and originally published on Medium.

At FanAI we deal with a ton of data visualizations revolving around sports sponsorships. Our users love to explore their sports sponsorships in more detail by filtering down to the specific teams, leagues and seasons that currently matter most to them. For example, a big renewal may be coming up or the marketing team needs to know what teams require the biggest bump in activations.

We enable this exploration through a series of dropdown filters that control the entire page or individual widgets. For example, a user can select the NFL during the 2020–2021 Season for the team’s Local-only fans.

They could then see the number of customers, the size of the audience, their investment in the property, ROAS numbers, and total sales lift, as well as many more data points for each available property.

The Challenge: Users need to share a link that remembers their filter selections

Users have taken the time to filter through the data. Those filter selections will need to be preserved in case of page reload and when the shared link is loaded initially.

Now: If a user wants to share the data they’ve selected from the case above. They can only send a link to the FanAI web page. The page will load with the first item in each filter. The user would then have to tell whoever they’ve shared the link with which filters to set to see the correct data.

After Setting URL parameters: The user can send a link that has the parameters of each filter setting. When the link is opened the filters will be preset to the corresponding URL values.

Loading in the URL parameters

First, we will write a hook that will grab the current URL and pull out the parameters as key: value pairs.

Breaking it down:

We need to access the current URL using the history API.

We parse the URL using the Query String module, leaving us with a map of parameters and their values.

The useEffect hook runs whenever the URL’s search parameters are updated, which sets the state, keeping all the values current.

Filling in the presets for the filters

We can now access the previously selected filter configurations from our URL using the useFiltersFromParams Hook. We can call this hook from any component.

Updating the URL when selections are made

The next step is to update the URL when the user makes a new filter selection.

Next, from inside our current component, we access the browser history using the useHistory hook from react-router.

we use a useCallback hook that will push our changes into react-routers history chain anytime our urlParams state is updated.

Now anytime we set the urlParams state the useEffect hook will fire and our useCallback hook will update the browser's history with the new search parameters.

Can we make it better?

Yes, we can. This is a basic idea of how these hooks can work together. It is important that we have a list of desired filter options to check the incoming prefilters with, as well as a way of handling any empty or manipulated parameters.

Each preFilter received needs to match one of the items that is selectable on our dropdowns or no pre selection will be made. Let’s say someone changes one of the url parameters for league to ?league=notARealLeague. The Filters will need a way to distinguish between invalid and valid filter options.

Conclusion

After searching the net for hours I was able to find many ways of changing URLs to match state, and a few ways of setting state using a URL, but I could not find any information on how to both set state, and update a URL in one easy flow. We are using these hooks together at FanAi and it has worked very well for us. Using these hooks makes adding new components that pre-set state from URL parameters a breeze.

---

FanAI helps brands understand and measure sponsorship impact on sales using unique insights to maximize investments. Our mission is to help brands realize the true value of sponsorships by proving their impact on sales, and our vision is to be the leader in optimizing brand marketing performance.