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.
Related
I am building a simple real time messaging app using react and socket.io for practice.
Current solution uses React's Context only to store socket.io object and React-Redux to store the rest.
The reason that I'm using the context alongside the redux is because redux cries for the following error when I try to store socket.io object into its state.
I also thought of using an exported socket.io module instead of the Context:
import io from "socket.io-client";
const socket = io(URL);
socket.connect();
export socket;
but did read some thread saying that it is not a great practice of using React ecosystem.
Any inputs, please?
It is absolutely fine to use Redux for state management and Context for dependency injection like you are doing here.
That's exactly what each of these were made for.
I am also working on a real-time chat widget project here in my company, and one thing I will suggest you is, while using react, it is all up to you what are you using and where because react is a library. but keeping one thing in mind your components must be scalable. I made my widget using svelte and managed the Web Sockets using event handlers.
you should give it a try.
one file with all the socket code and event listeners attached to them
2nd file with the custom events written which will invoke the socket operations from 1st file.
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
In my application I want to use Dixie.js to read/write data into IndexDB from my Webworker & Dixie Observable to listen event from main thread (React functional component which uses hook) instead of worker postMessage.
Dixie.js documentation is very clear but Dixie Observable documentation is not that clear
https://www.npmjs.com/package/dexie-observable
Provided code sample not working from React. I will appreciated for any help/input.
Thanks!
Look at this page instead: https://dexie.org/docs/dexie-react-hooks/useLiveQuery()
Dexie.Observable is something else.
I'm working on a prototype for a web app and I chose NextJS because I wanted to learn it better, but I realize I'm not using it in the "standard" way. I started from the Next + Material-UI example here: https://github.com/mui-org/material-ui/tree/master/examples/nextjs and all was good.
But now, I'm trying to persist data using sessionStorage, and I'm finding it difficult to make this work without being able to use the componentDidMount lifecycle event at the page-level. Next's documentation says that projects with a custom _document.js file won't have the componentDidMount method client-side. My project uses a custom document file due to Material-UI. It seems like it's there to support server-side rendering of css-in-js frameworks.
If I don't need server-side rendering, is there a way I can keep Material-UI working, but do away with the custom _document.js file so I can use componentDidMount?
You should be fine using both sessionStorage and a custom document.
componentDidMount (and any other lifecycle method) is not working only for _document.js as this is not rendered client side.
sessionStorage is part of the window so you will be fine using it on any other page/component using the componentDidMount lifecycle.
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!