New to React here,
I'm building a class component with Typescript. I need to fetch data from the server when component displays. componentDidMount() seems to be the right place to do that; but it is always called twice.
I found its because of the <React.StrictMode> in my index.tsx (and should'nt be called twice in prod mode).
But in the meantime I feel pretty annoying that my api is called twice everytime while I'm developing my app.
Any way I can avoid that?
Thanks
Related
When I run my react app in the browser, everything works fine. But when I edit a file and it gets saved, I can still see the whole app but when I try to interact with it, it doesnt work, I did inspect element and saw that the body that does not contain anything. Yet the content is visible?
Any solutions?
Note , when I reload the page everything is working fine, but its annoying to have to reload the page everytime.
Next JS is based on Reactjs and this might be helpful for you:
Limitations
Fast Refresh tries to preserve local React state in the component
you're editing, but only if it's safe to do so. Here's a few reasons
why you might see local state being reset on every edit to a file:
Local state is not preserved for class components (only function components and Hooks preserve state).
The file you're editing might have other exports in addition to a React component.
Sometimes, a file would export the result of calling a higher-order component like HOC(WrappedComponent). If the returned
component is a class, its state will be reset.
Anonymous arrow functions like export default () => ; cause Fast Refresh to not preserve local component state. For large
codebases you can use our name-default-component codemod.
As more of your codebase moves to function components and Hooks, you
can expect state to be preserved in more cases.
You can read more about FastRefresh from the documentation.
How do I use webworkers in a react app ?
I wrote an webworker and tested it in a simple app (html) so it works fine.
But using same approach in a react app doesnt work
I don't want at first use any react-something-webworker, I want just use pure Work api
const _worker = new Worker('./worker')
seems not importing the code inside worker.js file (self.addEventListener("message...)
Thanks for helping
In a React class component you can instantiate a web worker in componentDidMount, define the worker's onmessage and onerror methods, then call worker.terminate() in componentWillUnmount.
In a React function component, replace componentDidMount and componentWillUnmount with useEffect.
Your React component and your worker can then exchange messages with postMessage.
Even if you don't want to use any React-specific libraries, have a look at the code from the react-hooks-worker library. It's less than 100 LOC and it will help you understand how to use the Web Worker API.
I'm trying to create a Chrome Extension that changes the way a React app behaves. I want to patch a render function of a specific Component.
I thought that the best way would be to Patch the createElement function of React, and once I detect that the component that I want to change is being created, I will patch its render function with my own rendering.
The problem is that this application was built using webpack, and I don't have access to its React instance...
How can I get the React instance?
Thanks!
I want to migrate my project from plain react to react redux, I am not new to React but new to Redux.
I have a fairly big web app written in React, dozens of React.js files.
most of them containing state's + passing variables between them.
including allot of Post/Get requests functions, implemented into at least half of my files.
I want to slowly move from plain react to react redux.
I wanted to ask if anyone have some article or can give an insight about migrating existing react project to react-redux.
I dont want to stop development for the sole purpose of the change but instead to slowly adapt to it.
is it possible ? is there a tool to help me do it ?
I saw some redux examples where entire render of app.js was surrounded by <Provider> </Provider>, does that mean every component inside <Provider> bracelet can not have it's own state ?
can I simply keep my old components as they are and put new ones into <Provider> </Provider> ?
Thanks in advance!
I saw some redux examples where entire render of app.js was surrounded
by , does that mean every component inside
bracelet can not have it's own state ?
The way react-redux works is by exposing a store prop, provided by the Provider. In order to consume it, or extract data from it you must wrap your component by it (not directly necessarily, but one of the parents must be a provider). In general in most apps you would simply wrap the entire application with a Provider, because for the most part, if you've chosen to introduce redux into your application, it is probably because your entire app needs some store.
Using redux does not mean that components can't have state. There is a big difference between global state - something that should be accessible to every component in your app (if the component chooses to "consume" it), and state that is private to a component - e.g. form changes before being sent to the server.
can I simply keep my old components as they are and put new ones into ?
Well, yes. But also - no. As I said earlier, you should probably start from the top and slowly drill down. Wrap your app with a Provider, and start moving your application state from the top-most component to the store. Once you get more comfortable with redux in general, you should start replacing the props you pass down the component tree with props from the state by connecting your inner components.
This way you can do it one component at a time without breaking existing logic.
I'm facing some issues when rendering a React component into the shadow DOM of a webcomponent.
I wrote a small piece of code to turn a React component into a webcomponent, but I want to render the
React component inside the shadow DOM of the webcomponent. But in that case, it seems that React is not able to catch UI events (click, keyPress, etc ...) anymore.
Let's take an example, let say that I have a first webcomponent <awesome-timer /> that render the React component inside the webcomponent node, and another webcomponent <less-awesome-timer /> that render the React component inside the shadow DOM of the webcomponent.
Both webcomponents use the same React component. However the one rendered inside the shadow DOM does not work, because click events on the button of the timer component does not trigger the bound function.
I guess React is not designed to handle such case, but I'd love to get more details about it.
The code of the example is available here : https://gist.github.com/mathieuancelin/cca14d31184bf4468bc1
Does anyone have an idea about it ?
I know this is kinda late but, I believe your issue when you pass any attributes to a web component they instantly become strings Because that's all you can pass to a web component. Now of course you can convert or cast them back to there original data type, except functions because once stringified they loose there scoping, lexical and all.
Now to your main question, you are were trying to pass you child element through the Main web components slot. Now you have to remember that once you pass anything to a web component you now have to use the webs components methods and return types to manage whatever you pass. So yes passing react into a web component will not work they you expect.
You will need to go back to whatever tool you use to build your web component and deal with the slot logic there. Since this is a very old post as are web components. You might not have had access to the modern web component build tool's we have today. I found Stenicl allows you to build and manage your web components in Typescript.
A good option is to change your pattern a little bit and just return web components from your react app.
Or you can use another really cool to call Lit-HTML or Lit-element. I believe they may have combined there core libraries. Anyway these tool will allow you to combine Reactjs and web components where lit-html gives you access to methods simial to Reactjs's life cycle methods. Anyway some good stuff to check out if your stuck at this point.