Update a React class component when Next Js Link used - reactjs

Question

Original Post
I have a React class component that is used on a Next/JS Dynamic Path. On initial load all is fine. But there is a fringe use case that if I am on a page where that component is already mounted and then click a Link that is the same dynamic base as the component path but with different params, the component does not unmount and getIntialProps runs but it does not call the constructor to update the new state.
Path Examples:
Dynamic Pattern
/vos/[id]/[slug]
Initial Path
/vos/203dk2-d33d-3e3e3d/thisName
New path
/vos/554-34r4f-44d4e/aNewName
Events
1. component loads with initial props/state
2. user clicks Link to same component path but updated params
3. component lifecycles run to reset state but does not and does not unmount
4. 2-5 seconds pass... no activity
5. getIntialProps finally runs with new params
6. componentDidUpdate lifecycle called to update state with new props
I have also tried to change the Link to a Router.push() but have the same results.
Question:
Is there a way to force unmount a component to allow for a new instance of it to be created.
If not above, what would be the best way to handle this fringe case in the component lifecyces? I have tried to update the state with a function in the componentDidUpdate() cycle but this gets a bit messy as it runs before the SSR is called so state management gets out of sync.
Code Example
static getInitialProps = async (ctx: NextPageContext) => {
const services = VerifiedOrganizationProfilePage.PageServices(ctx);
const { lang: language, id: voId } = ctx.query as IProfilePagesQueryParams;
// check VO page is existing
// if VO owner or Admin
let verifiedOrganization: IVerifiedOrganizationResponse | undefined;
let user: IUserResponse | undefined;
let isVoOwner: boolean = false;
let isPlatformAdmin: boolean = false;
let isVoOwnerOrPlatformAdmin: boolean = false;
try {
verifiedOrganization = await services.verifiedOrganizationService.getVerifiedOrganization(voId);
if (!verifiedOrganization) throw new Error('No verified organization with that id was found!');
const userId = await services.cognitoIdentityService.getUserIdInSession();
if (userId) {
user = await services.usersService.getUser(userId);
isPlatformAdmin = AuthUtil.hasRoles(
[ERole.PLATFORM_ADMIN],
user.platformRoles
);
isVoOwner = OrganizationUtil.isVerifiedOrganizationOwner(
verifiedOrganization.id,
user
);
isVoOwnerOrPlatformAdmin = isVoOwner || isPlatformAdmin;
}
} catch (error) {
NextUtil.redirectTo(
'/not-found',
ctx.res,
HTTP_REDIRECT.TEMPORARY,
language
);
}
// fetch publicly visible data
const { store } = ctx;
store.dispatch(fetchCampaignsRequest({
verified_organization_id: voId,
limit: isVoOwnerOrPlatformAdmin ? EPaginationLimit.FIVE_HUNDRED : EPaginationLimit.DEFAULT,
}, ctx));
store.dispatch(fetchCausesRequest({
verified_organization_id: voId,
limit: EPaginationLimit.DEFAULT
}, ctx));
store.dispatch(fetchCommentsRequest({
verified_organization_id: voId,
limit: EPaginationLimit.DEFAULT
}, ctx));
store.dispatch(fetchUpdatesRequest({
verified_organization_id: voId,
limit: EPaginationLimit.DEFAULT
}, ctx));
// wait for redux saga updating state
await new Promise<void>((resolve) => {
const unsubscribe = store.subscribe(() => {
const state = store.getState();
if (!state.campaign.isFetching && !state.cause.isFetching && !state.comment.isFetching && !state.update.isFetching) {
unsubscribe();
resolve();
}
});
});
return {
user,
voId,
isVoOwner,
isPlatformAdmin,
verifiedOrganization,
isVoOwnerOrPlatformAdmin,
tabValue: EVerifiedOrganizationProfilePageTabs.CAMPAIGNS,
pageUrl: NextUtil.getPageUrl(ctx),
};
}
...
constructor(props){
super(props);
this.state = {...this.props}
}
...
// used to check new props from VO if coming from another VO page and set the state
static async getDerivedStateFromProps(nextProps: IVerifiedOrganizationProfilePageProps, prevState: IVerifiedOrganizationProfilePageState) {
if (nextProps.voId !== prevState.voId) {
return {
voId: nextProps.voId,
urlChanged: true,
tabValue: EVerifiedOrganizationProfilePageTabs.CAMPAIGNS,
isWaitingAdminApproval: false,
isUserBothVoAndIpRepresentative: false,
visibleBeneficiaryList: listResponse,
beneficiaryGroups: listResponse,
followingVerifiedOrganizations: {},
beneficiaryBlockchainCSVData: undefined,
userRating: undefined,
isLoading: true,
};
}
}
...
async componentDidMount() {
Router.events.on('routeChangeStart', this.handleRouteChangeComplete); // to trigger callback beofre NEXT Router/Link executes
await this.fetchPersonalData(); // method to fetch user specific data
}
...
async componentDidUpdate() {
if (this.state.urlChanged) {
await this.fetchPersonalData();
}
}
...
componentWillUnmount() {
Router.events.off('routeChangeStart', this.handleRouteChangeComplete);
}
...
// sets the current open tab to CAMPAIGNS if a VO navigates to a connected VO profile from a restricted tab
public handleRouteChangeComplete = async (url: string) => {
this.setState({tabValue: EVerifiedOrganizationProfilePageTabs.CAMPAIGNS,});
}
...
public fetchPersonalData = async () => {
const { voId, user, verifiedOrganization, isPlatformAdmin, isVoOwnerOrPlatformAdmin } = this.props;
let isVoRepresentative: boolean = false;
let isIpRepresentative: boolean = false;
let isUserBothVoAndIpRepresentative: boolean = false;
let isWaitingAdminApproval: boolean = false;
let visibleBeneficiaryList: IListResponse<IBeneficiaryWithInvitationStatus> | undefined;
let beneficiaryGroups: IListResponse<IGroup> | undefined;
try {
const services = VerifiedOrganizationProfilePage.PageServices();
if (user) {
isWaitingAdminApproval = verifiedOrganization.verifiedOrganizationStatus === EVerifiedOrganizationStatus.PENDING_PLATFORM_ADMIN_APPROVAL;
// If Verified Organization is waiting for Admin Platform approval, only Platform Admin can see the page.
if (isWaitingAdminApproval && !isPlatformAdmin) {
throw new NotFoundError();
}
isVoRepresentative = AuthUtil.hasRoles(
[ERole.VERIFIED_ORGANIZATION_REPRESENTATIVE],
user.platformRoles
);
isIpRepresentative = AuthUtil.hasRoles(
[ERole.IMPLEMENTING_PARTNER_REPRESENTATIVE],
user.platformRoles
);
isUserBothVoAndIpRepresentative =
isVoRepresentative && isIpRepresentative;
// If Verified Organization is waiting for Admin Platform approval, only Platform Admin can see the page.
if (isWaitingAdminApproval && !isPlatformAdmin) {
throw new NotFoundError();
}
// add the prefix to the id so we can match the record in the Connections table.
const prefixedId = EIdTypes.VERIFIED_ORGANIZATION.toUpperCase() + '#' + verifiedOrganization.id;
// Fetch data visible only to VoOwner and Aidonic
const connections = [] as unknown as IListResponse<IConnectionVOIP>;
if (isVoOwnerOrPlatformAdmin) {
// Get from the API all the connections sent or received
// Commenting this out as it calling twice the API. The call to the API is done from the Tab instead.
// connections = await services.connectionsService.getVisibleConnectionsByOrganization(prefixedId);
visibleBeneficiaryList = await services.beneficiaryService.getBeneficiariesVisibleToOrganization(prefixedId);
beneficiaryGroups = await services.beneficiaryGroupsService.getBeneficiaryGroupsList(prefixedId, {limit: EPaginationLimit.THIRTY});
}
const follows = await services.followsService.getFollowsList({
user_id: user.id
});
const [followingVerifiedOrganizations] = mapFollowsByKey(follows, [
'verifiedOrganizationId'
]);
const userRating = await services.ratingsService.getRatingList({
user_id: user.id,
verified_organization_id: verifiedOrganization.id
});
this.setState({
voId,
connections,
tabValue: EVerifiedOrganizationProfilePageTabs.CAMPAIGNS,
beneficiaryGroups,
isWaitingAdminApproval,
visibleBeneficiaryList,
followingVerifiedOrganizations,
isUserBothVoAndIpRepresentative,
userRating: userRating && userRating[0],
isLoading: false,
urlChanged: false
});
}
} catch (e) {
console.log('Error in data fetching on VO profile page: ', e);
}
}
Update
I have split the props from the state to maintain one source of true and used getDerivedStateFromProps() to catch the change and call fetchPersonalData(). All working well.
The only issue is it seems to take twice as long to load the new updated props/state than initial load. Thoughts?

Answer 1

Solution:
For my case this was cause by a API call in the lifecycle. Framework worked fine.