Skip to content

fix(error-boundary): remove ErrorBoundaryGroup's not on purpose reset because of isMounted's side effect #287

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.

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

Conversation

manudeli
Copy link
Member

@manudeli manudeli commented Jul 9, 2023

related with toss/suspensive#92

Remove ErrorBoundaryGroup's not on purpose reset because of isMounted's side effect

useIsMounted of @toss/react is implemented by useState, but we don't need to use useIsMounted triggering rerender component self when after mount.

useIsMounted of @toss/react

import { useEffect, useState } from 'react';

/** @tossdocs-ignore */
export function useIsMounted() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  return mounted;
}

before this Pull Request, ErrorBoundaryGroup used useIsMounted to prevent reseting ErrorBoundaryGroup self on first rendering, and after mounting and checked whether parent ErrorBoundaryGroup.resetKey is changed to reset self.

but after this Pull Request is merging, we don't need to make unnecessary rerendering due to useIsMounted.

In addition, we can prevent unintended ErrorBoundaryGroup resetting by useIsMounted.

When first I add this ErrorBoundaryGroup in @toss/error-boundary, I couldn't consider useIsMounted's rerendering side effect

AS-IS

ErrorBoundaryGroup will trigger reset on render because of useIsMounted

image

TO-BE

ErrorBoundaryGroup won't trigger reset on render because of removed useIsMounted

image

Check more detail and procedure to add this Pull Request in toss/suspensive#92 please

PR Checklist

  • I read and included theses actions below
  1. I have read the Contributing Guide
  2. I have written documents and tests, if needed.

@netlify
Copy link

netlify bot commented Jul 9, 2023

👷 Deploy request for slash-libraries pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit a649ad0

@@ -51,7 +51,6 @@ const initialState: ErrorBoundaryState = {

class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
state = initialState;
updatedWithError = false;
Copy link
Member Author

@manudeli manudeli Jul 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought this BaseErrorBoundary.updatedWithError is unnecessary field, there is no updatedWithError in https://github.com/bvaughn/react-error-boundary/blob/master/src/ErrorBoundary.ts too.

If this is matter, let me know why meaningful please.

Comment on lines -70 to -72
resetState() {
this.updatedWithError = false;
this.setState(initialState);
}

Copy link
Member Author

@manudeli manudeli Jul 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I remove this method BaseErrorBoundary.resetState. if no updatedWithError field, resetState is not anymore meaningful too.
I thought this.setState(initialState) is better to express what this is.

Comment on lines +1 to +4
/** @tossdocs-ignore */
import { usePrevious } from '@toss/react';

export const useIsChanged = (value: unknown) => usePrevious(value) !== value;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made custom hook, useIsChanged to check whether value is changed with previous rendering value.

this hook will check parent ErrorBoundaryGroup.resetKey is changed
If parentErrorBoundaryGroup.resetKey is changed, ErrorBoundaryGroup self will change resetkey to propagate to child ErrorBoundaryGroup recursively.

Copy link
Member

@okinawaa okinawaa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM👍🚀

Copy link

vercel bot commented May 13, 2024

@manudeli is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.

@manudeli manudeli self-assigned this May 13, 2024
@manudeli manudeli merged commit 62441d4 into toss:main May 27, 2024
5 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants