Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Bugfix: If the callback function changes we re-render #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 23, 2025
Merged

Bugfix: If the callback function changes we re-render #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ad07353
Bugfix: If the callback function changes we re-render
buckett Jun 4, 2025
865259d
Also add a developer warning
buckett Oct 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 22 additions & 3 deletions src/components/tokenRetriever/LtiTokenRetriever.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import PropTypes from "prop-types";
import { Spinner } from '@instructure/ui-spinner';
import ErrorBillboard from "../errorBillboard/ErrorBillboard.jsx";
Expand All @@ -23,7 +23,7 @@ export const LtiTokenRetriever = ({ ltiServer, handleJwt, children, location = w
const server = getServer();

if (!token) {
setState({ loading: false, error: "No token found to load" });
setState({ loading: false, error: "No id found to load token with" });
return;
}

Expand Down Expand Up @@ -69,7 +69,26 @@ export const LtiTokenRetriever = ({ ltiServer, handleJwt, children, location = w
};

fetchToken();
}, [handleJwt, ltiServer]);
}, [ltiServer]);

// Log a warning if the value of handleJwt changes as it's not how the component should be used.
const handleJwtRef = useRef(handleJwt);

useEffect(() => {
if (handleJwtRef.current !== handleJwt) {
// Helpful developer warning — prefer using a stable callback (e.g. useCallback) so
// the component doesn't see handleJwt as changing every render.
try {
console.warn(
'LtiTokenRetriever: prop `handleJwt` changed. This component should have a stable callback (avoid creating a new function each render, ie useCallback()).'
);
} catch (e) {
}
}
// Update ref after comparison so initial mount won't trigger the warning.
handleJwtRef.current = handleJwt;
}, [handleJwt]);


const getToken = () => {
const params = new URLSearchParams(location.search);
Expand Down
2 changes: 1 addition & 1 deletion src/components/tokenRetriever/LtiTokenRetriever.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ describe('LtiTokenRetriever Test Suite', () => {
<h1>Mock Child Element</h1>
</LtiTokenRetriever>
)
expect(screen.getByText('No token found to load')).toBeDefined()
expect(screen.getByText('No id found to load token with')).toBeDefined()
});

it('Should find token in URL', () => {
Expand Down