How can we implement error Boundary in React Hooks. Is it even supported with react Hooks?
The questions is whether it is possible to implement Error Boundary as a hook and the answer is no BUT it does not mean that you can not use Error Boundary class components in a project which you use hooks heavily.
Create a Error Boundary class component and wrap your React Functional Components(hooks) with the Error Boundary class component.
You can implement error boundary in react hooks with the help of react-error-boundary package.
npm install --save react-error-boundary
Then:
import {ErrorBoundary} from 'react-error-boundary'
function ErrorFallback({error, resetErrorBoundary}) {
return (
<div role="alert">
<p>Something went wrong:</p>
<pre>{error.message}</pre>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
)
}
const ui = (
<ErrorBoundary
FallbackComponent={ErrorFallback}
onReset={() => {
// reset the state of your app so the error doesn't happen again
}}
>
<ComponentThatMayError />
</ErrorBoundary>
)
Please read more on React-error-boundary
*There is no Error Boundaries in hook yet *
componentDidCatch
and
getDerivedStateFromError
There are no Hook equivalents for these methods yet, but they will be added soon.
I wrote react-use-error-boundary to achieve this.
React 16 introduced Error Boundaries. As of React 17, there still is not an equivalent hook for function components.
I liked the API implemented by Preact's useErrorBoundary and attempted to recreate a similar API. If you're interested in building this from scratch you can checkout the code on GitHub.
You can't do that with hooks. Hooks do not have an equivalent of componentDidCatch. See this section of the hook FAQ
getSnapshotBeforeUpdate, componentDidCatch and getDerivedStateFromError: There are no Hook equivalents for these methods yet, but they will be added soon.
Related
I want to use i18n react useTranslation hook inside Context component. I guess that important thing is that the context was working correctly as long as useTranslation hook was used inside if statement which breaks the rules of hooks and sonarcloud mark this as A rate bug. But as I moved useTranslation call on the very top of the component I get following error:
Error: Should have a queue. This is likely a bug in React. Please file an issue.
And this inside console
The context and project itself is quite large so I am not sure how to provide enough code to present the problem.
As it turned out someone working on the project in the past didn't wrap LocaleContext over the Context I was struggling to repair so in my case all I had to do was following slight change from this:
<MyContext>
</LocaleContext>
<Component />
</LocaleContext>
</MyContext>
to this:
<LocaleContext>
<MyContext>
<Component />
</MyContext>
</LocaleContext>
I am receiving the following error in my console
I have narrowed this down to the following section in the documentation for Next-Link
Link here
However I am still unable to resolve the error because in my case the functional child component is a FontAwesomeIcon component, How can I apply this fix to the FontAwesome component?
Code
<div className={styles.linkItem}><Link href='https://github.com/Murchyman' passHref><FontAwesomeIcon icon={["fab", "github"]} /></Link></div>
Thank you for your time.
In the documentation of styled-components you commonly see the following notation used in examples
const Button = styled.button`
color: palevioletred
`;
render(
<Button>Click me</Button>
);
JSX being passed as a parameter to render really threw me off when I was starting to learn styled-components. Is this some kind of alternative notation in React, that I somehow missed? Is it meant as pseudo code shorthand for the return value of React's render function? Is it some kind of DSL that can be used with styled-components?
The styled-components web page uses React Live to render demo components, so that render() is a specific imperative form enabled by React Live and is not directly related with styled-components.
That being said, there's nothing special in passing JSX to a render() function: you usually do that with ReactDOM.render(). JSX compiles into React.createElement(), so what you're actually passing to the function is a React element.
I am trying to get the wordpress block editor to load in a react project: https://www.npmjs.com/package/#wordpress/block-editor.
I have set it up exactly as per the example on the npm page but it gives an invalid hook error. I think perhaps it is due to a version mismatch as error suggest?
This is the code:
import {
BlockEditorProvider,
BlockList,
WritingFlow,
ObserveTyping
} from "#wordpress/block-editor";
import { SlotFillProvider, Popover } from "#wordpress/components";
import { useState } from "#wordpress/element";
import "#wordpress/components/build-style/style.css";
import "#wordpress/block-editor/build-style/style.css";
export default function MyEditorComponent() {
const [blocks, updateBlocks] = useState([]);
return (
<BlockEditorProvider
value={blocks}
onInput={(blocks) => updateBlocks(blocks)}
onChange={(blocks) => updateBlocks(blocks)}
>
<SlotFillProvider>
<Popover.Slot name="block-toolbar" />
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
</WritingFlow>
<Popover.Slot />
</SlotFillProvider>
</BlockEditorProvider>
);
}
And the typical hook error:
Error
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See [link] for tips about how to debug and fix this problem.
I have setup a codepen to tyr it here: https://codesandbox.io/s/sleepy-proskuriakova-op59q
I looked up wordpress version of react and it seems to be 16.6.3 so set that in sandbox and used an older version of react scripts (2.1.8) that at the time was using 16.6.2 but no change in error. I tried several combinations of versions with no change.
What is actually causing this error? How can I get this component to load?
Here is a working codesandbox.
Things I've changed:
react and react-dom to 16.13.1 which is the version used in #wordpress/element
Had to add DropZoneProvider
Install #wordpress/block-library and call registerCoreBlocks
For more code examples you can check the official storybook docs, the source code is in the bottom panel, under the Story tab.
This is brand new install - I have not put any transitions on the Alert component
To replicate the code it is simple
import React from "react";
import { Alert } from "reactstrap";
export const Index = () => {
return (
<div>
<Alert color='primary'>This is a primary alert — check it out!</Alert>
</div>
);
};
Error Msg: Please update the following components: Transition
How does one go about updating Transition or eliminating it all together?
In the event that someone comes here on after searching the question and is looking for insight this is it.
React strap (at the time of this post) uses the react-transition-group things fade in and out and menus slide up and down. After amalgamating the info on this subject here and on Github they are currently updating the library. I have finished the coding of that component by ignoring the warning.
It did not impede this iteration of that component. Happy Coding.
I have this same warning, and I fixed it changing in the index.js file, the value of <React.StrictMode> to <React.Fragment>.
Since this removes the warning, is not guaranteed that your can be bulletproof.
This issue was reported, and apparently fixed but I received the same error even with the updated source code. It's more than just the error as well - it can cause components to re-render
Here is one github thread from the reactstrap repo about this (but there are a number of them): https://github.com/reactstrap/reactstrap/issues/1340
There are a number of issues related to this warning though.
As best I can tell it has something to do with an item in Transition.js, and I think it may have to do with a this.context call when a component is 'entering'
But, the project I encountered this issue is the first React App I'm building, and I'm not quite ready to learn the Legacy Context API, so that's just my best guess and in the end I just opted for an alternative package.
I don't have the rep to put this in a comment, so the only answers I have are:
Report the issue to the reactstrap team and wait/assist with a fix
Use an alternative package