Edge browser when refreshing maintains values for ReactJS - reactjs

I am having issues in Edge whereby when I refresh a page which has some values selected from a <select> it still maintains them on refresh.
I have a create-react-app. Currently using 16.8.0 version of ReactJS.
Other browsers are fine just Edge not behaving as expected. Might be down to caching but sure how we can overcome that in the react app

Related

My Reactjs ecommerce app has missing columns in Firefox browser

Iam trying to build ecommerce app using ReactJs. The products cards appears on home page with columns: 3 set in css. It works in chrome and edge without any issue but in Firefox, the third column becomes invisble. If I minimize and maximize the browser then it sometimes appears, sometimes dosent.
I have tried using css auto prefixer but it didn't solve the problem.

React app very slow in Chrome but significant smooth in Firefox

I have to build a react-redux site and i have some performance issues on chrome. I have a very big list of nested components rendered on my webpage. I have to build a modal menu that is opened in front of the already rendered list of components. In chrome is very very slow, even a click is taking very long. In firefox works pretty smooth.
I tried debugging with react dev tools and it's saying nothing is rendered in react but the app is very slow. I will attach some benchmarks with the fps. They are taken when the page is idle.
This one is one chrome:
And on Firefox the fps is steady on 60 fps. No drops.
What can be the issue on chrome.
I want to mention in background there are a lot of components but they are already rendered and do not suffer modifications.

ReactNative Pull To Refresh for iOS platform

All Dev, I am working on pull to refresh feature in my react native project. As we all know that react native itself providing a Refresh Control that we can us along with List and ScrollView but not with View 😉that's fine.
I notice that there’s no common gesture for refreshing the page data for both platform if we go with the Refresh Control because of fundamental different
After reading this articlehere:
For iOS, the Pull-to-Refresh embedded in as part of the list.
For Android, the Pull-to-Refresh is not part of the list, but on top
of it.
Now my question is there any way to implement the same gesture for refreshing on iOS platform either native side or react side. For android we have SwipeRefreshLayout but do we have any controller that help to achieve the same gesture in iOS platform?.
Below is the refresh image from android platform:(Gmail App)
Sorry in case of you can't understand the question. feel free to comment will update. Any suggestion and comments are welcome.
Thank you.

Next.js weird render for first time render from server

I have an issue with render from the server. On the first load of the page, the layout goes for a toss. However it is corrected on subsequent renders via navigating the pages. Surprisingly the weired layout also appears on a browser refresh. I have tested it with both Chrome and Microsoft Edge but same problem.
The app was created using standard boilerplate 'create-next-app' and then I just added a few of my pages. See screenshots below
one with the weird screen
and other showing correct render
This actually an issue with CSS injection with SSR for material-ui. Check examples here

ReactJS project on Android WebView, Image not showing

I am currently experimenting on a hybrid app using ReactJS for my front-end loaded inside an Android WebView. On one of the pages, I have a list that loads an external/hosted image. Tapping on these images routes to another page that shows its description (using react-router. history=hashHistory).
Testing on the browser(chrome), the images appear once loaded. On the other hand, testing on the actual device, the images does not appear. Only when I tap the list item and press back (hashHistory.goBack) that it appears.
I know this is not the best use for ReactJS, but this is better than what we are currently using. Also, our current setup prevents us from pursuing the React Native way. Any ideas?
EDIT:
here's a screen cap:
You need to change your websettings in your code.
WebSettings settings = webView.getSettings();
settings.setDomStorageEnabled(true);

Resources