Combining useEffect, useContext, and/or useSWR to minimise renders on static pages with dynamic content - react-hooks

Question

I suspect I'm overcomplicating things, and there's a much simpler solution here, but I'm new to NextJS ... and am clearly doing it wrong.
I'm generating contest landing pages from a headless CMS using NextJS ("the contest page"). Any given user might enter multiple contests, and go to any one/many of the contest pages.
The requirement is, the contest page displays how many "points" the user has in the contest, and there are components where if the user takes certain actions (e.g., clicking on them) he gets more points.
Which buttons are displayed and how many points each is worth are defined in the CMS.
So, my current thinking (which isn't working) is:
a tuple of [userId, contestId] is stored in localStorage for each contest entered (they enter by submitting a form on a different landing page, which redirects to one of these that I'm currently building)
the contest page is wrapped in a context provider, so the action components know to which [userId, contestId] they should be adding points in the database; and so the display component knows the current point value
SWR queries for the point value, so it can do its magic of "fast/lightweight/realtime"
Where I currently am:
// /pages/contests/[contest].js
export default function ContestEntryPage({ data }) {
return (
<ContestProvider>
<PageLandingPage data={data} />
</ContestProvider>
);
}
And then the landing page component:
// /components/PageLandingPage.js
const fetcher = async ({pageId, contestId, clientId}) => {
const res = await fetch({
pathname: '/api/getpoints',
query: {
pageId,
contestId,
clientId
}
});
return res.json();
}
const PageLandingPage = ({ data }) => {
const { dispatchContest } = useContest();
let registration, points;
if (data?.contestPage?.id) {
registration = // complicated parsing to extract the right contest from localStorage
const { data: fetchedData, error } = useSWR({
pageId: data.contestPage.id,
contestId: registration.contestId,
clientId: registration.clientId
}, fetcher);
points = fetchedData;
}
useEffect(() => {
// Don't waste the time if we're not a contest page
if (!data?.contestPage?.id) return;
dispatchContest({
payload: {
contestId: registration.contestId,
clientId: registration.clientId,
points: points
},
type: 'update'
})
}, [data, points, registration, dispatchContest])
return (
<div>
Awesome content from the CMS
</div>
)
}
export default PageLandingPage
As written above, it gets stuck in an infinite re-rendering loop. Previously, I had the SWR data fetching inside of the useEffect, but then it complained about calling a hook inside of useEffect:
const PageLandingPage = ({ data }) => {
const { dispatchContest } = useContest();
useEffect(() => {
// Don't waste the time if we're not a contest page
if (!data?.contestPage?.id) return;
const registration = // get from localStorage
const { data: points, error } = useSWR({
pageId: data.contestPage.id,
contestId: registration.contestId,
clientId: registration.clientId
}, fetcher);
dispatchContest({
payload: {
contestId: registration.contestId,
clientId: registration.clientId,
points: points
},
type: 'update'
})
}, [data, dispatchContest])
Obviously, I haven't even gotten to the point of actually displaying the data or updating it from sub-components.
What's the right way to combine useEffect, useContext, and/or useSWR to achieve the desired outcome?
Though I suspect it's not relevant, for completeness' sake, here's the useContext code:
import { createContext, useContext, useReducer } from 'react';
const initialState = {
contestId: null,
clientId: null
};
const ContestContext = createContext(initialState);
function ContestProvider({ children }) {
const [contestState, dispatchContest] = useReducer((contestState, action) => {
return {
...contestState,
...action.payload
}
}, initialState);
return (
<ContestContext.Provider value={{ contestState, dispatchContest }}>
{children}
</ContestContext.Provider>
);
}
function useContest() {
const context = useContext(ContestContext);
if (context === undefined) {
throw new Error('useContest was used outside of its provider');
}
return context;
}
export { ContestProvider, useContest }