Live example https://snack.expo.dev/su1-U5DZc
If I swipe screens with buttons - everything okay, but if I swipe with gesture - screens shows twice. Why so? Does this setWtf(state.index);
const onTouchStart = (e, state, context) => {
console.log('onTouchStart: ' + state.index);
setWtf(state.index);
};
make index stored somewhere by reference and then get updated?
Yes it was due to setWtf(state.index);. There is a reported bug of render issue when updating state in their official git page.
They are saying to downgrade react-native-swiper to version 1.5.5
or you could follow other solutions mentioned here : Update the state breaks the slides
Without more information, it's impossible to pinpoint the exact cause of the problem you're experiencing, although it's conceivable that the problem is connected to the way your code handles touch events.
Your code is probably adjusting the value of state.index depending on the gesture when you swipe between screens, and then refreshing the screen display based on the value of state.index. The screen display may update twice if state.index is being updated by reference because the value is being modified twice: once by the gesture and once by the setWtf function.
Using a different variable to hold the current screen index and only updating the value of state.index when the user interacts with the buttons is one potential fix for this problem. This should prevent the screen from being displayed more than once and ensure that the value of state.index is only modified once.
It's important to keep in mind that the setWtf function you specified in your query could not be connected to the problem you're having. Without more information, it's difficult to say for sure whether this function is being used to update another state in your application.
Related
I am trying to hide an element 'GorillaSurfIn' after I click on it.
But also it should fire the 'setShouldGorillaSurfOut' to 'true'. The second part works, but after I added this function:
function hideGorillaSurfIn() {
let element = document.getElementById('gorilla-surf-in');
ReactDOM.findDOMNode(element).style.display =
this.state.isClicked ? 'grid' : 'none';
}
After I click, the code falls apart.
Once I click, the element should be hidden/removed till the next time the App restarts.
Here is the Code Sandbox Link for further explanation.
I am open to any solutions, but also explanations please, as I am still fresh in learning React.
I have changed your code a bit to make it work. You can make further changes according to your need. A few things that I would like to add: -
You should avoid using findDOMNode (in most cases refs can solve your problem) as there are certain drawbacks associated with findDOMNode, such as the react's documentation states "findDOMNode cannot be used with functional components".
I've used refs (forward ref in this case) to make it work.
GorillaSurfIn was called twice, so there were two Gorilla gifs on the screen with same IDs. Not sure if that was the intended behaviour but each element should have unique ID.
Check out the code sandbox.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I made a small app using react and it works smoothly on my computer. However, when I open it on different mobile devices it crashes after a minute or so of usage. I don't know what causes the problem but weirdly enough I don't have any bugs or warnings on my console and haven't used componentDidUpdate or hooks that might cause infinite loops like useEffect. Please help me if you know what causes a react app to glitch on mobile devices or have encountered the same problem and found a solution for it.
Here's the app
https://summerresort.netlify.app
and the code
https://github.com/Mahmoud-farargy/summerresort/tree/master/Beach-Resort
Thanks!
Your app looks all ok except 2 points. I can't test my guess, but I'm almost entirely sure that your problem comes from those 2.
Both parts that seem problematic are located in index.js, here there are:
window.addEventListener("scroll", () => {// gets the current height
let scroll = document.body.scrollTop || document.documentElement.scrollTop;
let arrowUp = document.querySelector(".arrow-up-btn").style;
scroll >= 1000 ? arrowUp.display="flex" : arrowUp.display = "none";
});
window.addEventListener("resize", ()=> {// gets the current width
this.setState({
currentPageWidth: window.innerWidth || document.documentElement.clientWidth
})
});
The first code block is expensive because:
The scroll event is fired very frequently.
You don't listen for scroll passively (it'd be a good idea though).
You set the style much more frequently than needed.
However, I think, that it is the second code block that causes mobiles to glitch.
Check out this answer to see why the resize event is fired on mobiles more frequently than on desktop.
Now, each time the resize event is triggered, the state of MainApp
is updated.
Each time MainApp is updated, React recalculates all its children.
By default, React just re-run render of each child & compares the output.
Considering you have all routes & all components inside the MainApp & you didn't implement any optimizations (React.PureComponent, lazy loading for routes, etc.) React will have to recalculate what the entire site looks like on each resize event.
The easiest fix would be to store currentPageWidth in a ref instead of state.
Another possible problem is that by attaching listeners inside the render method, you're attaching new listeners on each single render without clearing any of previously added listeners.
Looks like React DnD expects draggable/droppable items to be siblings in order to work properly. If one of the items belongs to another parent I get "Expected to find a valid target." as soon as the drag over event fires (when the swap should trigger).
I tweaked an example from their docs in case anyone would like to try it out:
broken example: https://codesandbox.io/s/broken-feather-qf0f2?file=/src/Container.jsx
Tweaks are at the bottom. Note that the first card item is rendered separately from the remaining ones, in another div.
In order to trigger the error just drag & drop the first item into another one. Notice that if you drag & drop any other items they will work.
original example: https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/04-sortable/simple?from-embed=&file=/src/Container.jsx
Thank you!
Could be an issue with react-dnd.
Check out this issue https://github.com/react-dnd/react-dnd/issues/361
From the issue that I had, the hover handler was updating the table/grid too fast. It was setting the state of the items and I guess DnD applies a new target id, hence the error.
Try adding a debounce on the hover handler with trailing option set to true. The problem is that the component is updating too quickly and the target id that DnD is expecting, has already changed due to the state change. It may help to add some checks in there to make sure that the item is droppable as well.
Due to #DDT's answer, I managed to solve the problem I was experiencing.
In the useDrop function I was updating the table/grid too fast after the update function from immutability-helper.
So I added a state variable e.g. wasDragDropped with an useEffect hook on it.
I change the wasDragDropped variable when useDrag is finished, and then update the table/grid via functionality in the useEffect hook.
(using react-dnd 14.0.4 and react-dnd-html5-backend 14.0.2)
I am implementing a react-table component containing server-side pagination and I need sorting on the columns as well.
However I am observing strange behaviors. When I am using only pagination and click on next page the pageIndex is getting incremented.
However when I add sorting hooks then then pagination in not working. The pageIndex is getting back to 1 automatically and I am not able to figure it why.
Can any one help me out. Below is sandbox link https://codesandbox.io/s/eager-breeze-9cw0r.
When making changes to the external data you want to disable automatic resets to the state of the table (see https://react-table.js.org/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes for more info). So in your case changing the page modifies the data you're passing to the table, which leads to the state of the table being reset.
In order to stop this you need to set autoResetPage to false. Eg:
useTable<FormattedRowData<T>>(
{
autoResetPage: false
});
I made the change to your sandbox and this resolved the issue.
In react-navigation 4, I was passing a function as a param to the navigated screen. But in react-navigation 5, this has a warning which is not recommended. So now how can I update params of previous screen from current screen ?
Example:
I am in a chat group.
I click on group image.
In the new screen I update group name.
Now I return back by clicking hardware back button.
And now the group name should be new updated name.
So how this is possible ??
I know I can use navigation.navigate() to go back with params, but in most cases there users use clicking on hardware back button instead of clicking the back arrow.
You can use the new way to handle Hardware Back Button described here: https://reactnavigation.org/docs/en/custom-android-back-button-handling.html#__docusaurus
But I don't think you should go this way. You should connect the group name to a local storage, and watch this variable in the render function. It's better to let the render to update itself instead of trying to do some force refresh with the back handler.
You can use a store (using redux, hooks or using local storage). Then you can use Navigation events => focus method when the screen comes into focus. Then you can get the updated store data and re-render the UI.