How to get code completion in React's LAZY component in Vscode? - reactjs

I am getting code completions for this component when I import it not as a lazy component .
const AceEditor = React.lazy(() => import('react-ace'));
When I import it like shown above , I don't get any intellisense or code completion for any of the props of the component when I am using it later within the Suspense component.
How do I fix this ?

Related

Rendering a dynamically loaded React component

`Here is my attempt to dynamically load a component at the click of a button, and show on page.
https://codesandbox.io/s/sweet-haze-knste?file=/src/App.tsx
I am using the below line of code to dynamically import the component when button is clicked.
const importedComponent = React.lazy(() => import("./DynamicallyImportedComponent"));
And the state is set using
this.setState({
importModule: importedComponent
// importModule: CommonEditorCallout
});
However, this does not render correctly.
When I use the regular import using the below, it renders fine
import DynamicallyImportedComponent from "./DynamicallyImportedComponent";
Is this possibly due to the fact that in the regular import I specify the name of the component I am importing, or something to do with the dynamic import itself?
Docs
The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.
So wrapping your lazy loaded component with React.Suspense with a fallback props will fix the error.
<React.Suspense fallback={<div>Loading...</div>}>
{this.state.showImportedModule && <div>{<ComponentToShow />}</div>}
</React.Suspense>
See example

Component name with React hooks in DevTools

I've just updated a from a class based to a functional component.
When I look in React's DevTools, I'd usually see my component named Gallery with all the named state variables.
Now though, All I see is a component named _default with a bunch of non-descriptive State: definitions.
From other answers, I've read that React Dev Tools now supports hooks but I've not seen any examples of the component name being wrong.
Is this normal behaviour or is there something I'm doing wrong?
Versions
React 16.9.0
React Developer Tools Chrome extension: 4.1.1
Also getting the same issue in Firefox.
Component code
// The component
import React, { useState, useEffect } from 'react';
const Gallery = ({ images, layout }) => {
const [showLightbox, toggleLightbox] = useState(false);
const [activeImage, setActiveImage] = useState(false);
return (
// Some JSX here
)
};
Render code
// Rendering the component
import React from 'react';
import { render } from 'react-dom';
import Gallery from '../../global/scripts/components/Gallery';
render(
<Gallery images={images} />,
document.getElementById('image-gallery'),
);
Devtools screenshot
Try adding a displayName to your component before export. Check the following link for reference.
DisplayName
Use it like Gallery.displayName = 'Gallery'

Getting a Cannot update during an existing state transition message after library updates

Have a ReactJS + Redux + Saga application that was recently updated to use the latest (or close to latest) versions of the respective JS libraries. After the library updates (no code changes) and running the application, I immediately see the "Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state." warning message in the console. It looks to be triggered by redux when I invoke the dispatch function (which then calls a function in Provider.js, then goes through react-dom, and then in turn writes the warning message. Again nothing in my code has changed, and my code is essentially built using stateless functions.
Not sure how to go about figuring out what is causing this warning-- although the app still runs ok as expected. Using React 16.8.6, react-redux 6.0.1, react-router-dom 5.0.0, redux 4.0.1, redux-saga 1.0.2, and connected-react-router 6.4.0.
Below is a sample page that would cause the warning message:
import React from 'react'
import {connect} from 'react-redux'
import {links} from '../links'
import {notify} from '../notifications'
const Home = props => {
const {dispatch} = props
return (
<main>
<p>
Go to Details...
</p>
</main>
)}
const dispatcher = dispatch => {
dispatch(notify(links.HOME))
return {dispatch}
}
export default connect(null, dispatcher)(Home)
You cannot call to dispatch inside the disaptcher function.
react-redux's connect parameters are:
function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)
mapDispatchToProps is what you called dispatch. These params are eventually run as functions that called in the render loop of the connected component. When you dispatch in the render loop it changes the state of a React component (looks like it's the Provider), which is forbidden by React.
Solution
Move the dispatch(notify(links.HOME)) to lifecycle method. For example you can add to the Home component (this will require to rewrite the Home component as an extension of React.Component class:
componentDidMount() {
dispatch(notify(links.HOME))
}
UPDATE
If you want to do this with classless component see that question

ReactJS useCallback not a function of react?

I have a functional Component which is using the hook useCallback. For the last few days everything was just fine. All worked as it should. Today I start up the app and I have this error:
React Hook "useCallback" is called in function "loginPage" which is neither a React function component or a custom React Hook function
This makes no sense because it has been fine. For debugging I simply erased all code on the page except that one coed and even just put a useCallback template in its place, but still the same. It is as if it has been removed from react entirely.
I checked my react version and find 16.8.6 also in react-dom.
Does anyone have any ideas?
import React, {Fragment,useCallback } from 'react';
import { Redirect} from 'react-router-dom';
import {useDropzone} from 'react-dropzone';
const loginPage = (props) => {
const callbackFunction = useCallback(() => {
console.log("callback called");
// Do something with callbackCount ...
return true;
}, []);
}
I see three problems why the error occurred.
which is neither a React function component or a custom React Hook function
loginPage is not a component. useCallback is a hook and it needs to be called inside a function component (not a class component) or in another hook (a function whose name starts with "use"). Check out the rules of hooks.
And also the component name should start with a capital letter, so it should be LoginPage for it to be a valid React component.
You are not returning anything from your component.

How to know when React built-in component finished rendering?

I'm using a React rendered SVG from a file.
import React from 'react';
import {ReactComponent as SvgFrontPanel} from '../svg/panel.svg';
render() {
return (<div className="panel">
<h2>Panel</h2>
<SvgFrontPanel/>
</div>);
}
After svg is rendered I need to execute some init code for it. I can do it once via window.onload or documentReady or whatever usual way to check when the page is ready. But then, when this component gets unmounted/mounted, I cannot catch the moment.
I can use componentDidMount or put my code inside render of this component but it doesn't mean the svg inside SvgFrontPanel is rendered at the time.
So here is the question: how can I understand when some uncontrolled component finished rendering? Suppose I cannot modify svg file at all (actually I can but prefer not to).

Resources