The logic below cause my page to re-render multiple times when a filter function is chosen and also when the other is chosen it will not work at all but makes my code to hang
enter image description here
Related
Initial view :
After collapsing the groupings :
After expansion :
I just can't figure out why are the events not showing.
There is no refetching going on,
just seems like the events aren't being rendered. The weird part is that any resize of the entire window, the events are being rendered.
I've tried using the cellDidMount callback to refetch the events, it is fixing the problem, however this solution is very costly on the backend since it is making calls to fetch the events however many Resources exist on that grouping.
I am trying to implement an infinite scroll mechanism where I fetch data from the server and feed it into a FlatList. To do this, I decided on a number of items that will be loaded per fetch(5 in my case).
The fetch call is made when onEndReached is called. I am having an issue however, depending on the data that I receive from the server, the initial data might be small and the 5 items that I get are not enough to fully fill the FlatList. (Basically, FlatList elements vary in size, and in some cases 5 items are super small and it does not fill the entire height of the FlatList).
Well, in this case, the end of the FlatList is clearly visible but onEndReached is not being called and so my next fetch does not happen.
I tried multiple values for onEndReachedThreshold but it still does not get called. Is onEndReached suppose to get called if there is not enough height to even make the FlatView scrollable or I am approaching this issue from the wrong angle?
Consider the TextInput component of React Native. It has a prop called value. I set the value to this.state.text.
It also has a prop onChangeText, which I set to (text) => {this.setState({text: text}).
Setting the state will cause the view to re-render, which will in turn trigger setValue on the component.
This doesn't cause any sort of recursion or undesired behavior with stock components. However, in building my own text input component, I'm finding that using state in value and in onChangeText causes native input events to re-render the view and call setValue.
i.e user types on keyboard, native module emits onChangeText event, JavaScript component receives event and updates state, state change causes re-render, re-render calls setValue on the native component, and the native component swaps out the text with the value received from the initial event (the same value).
The problem is, when you set the text on an iOS or Android native text component, it resets the cursor. So I tried putting in a conditional if(newText != currentText) {setText(newText)}, and this works when you type slow, but when you type fast, things get chaotic and you can't predict the order of events.
I looked at how the React Native authors handle this in their own text component, and they seem to be using some sort of counter (here and here) to synchronize events, but I couldn't keep up with the logic as it was all over the place.
For now, my solution is to not use state in the render function, but then my component depends on render not being called unexpectedly to function properly, and that's just a disaster waiting to happen.
Any insight as how to better design a component like this, or how RN components get around this issue?
I have a component in my app that uses an image as a background. The component is a chat screen where users can view previous messages and send new ones. The component is connected to redux store. The component looks like this at a high level
// Chat screen
<Image>
<Messages />
<TextInput />
</Image>
The chat screen component will be re-rendered every time user types anything. Sometimes, users have reported a lag in typing and seeing the typed character on screen. I am thinking if it is due to the fact that Image is also re-rendered every time user types something and if it would make sense to extract the Messages and TextInput into a separate component and connect that to the redux store such that the Image is not re-rendered when user is typing.
I don't want to make this change if it is not going to affect the performance and I don't have a sure shot way to measuring if that change has affected the performance as the lag is very intermittent.
Let me know if you think this would affect the performance of the component.
Using an image as a background can make performance issue, especially on Android. Use minified images as a background. Also, Try to capsulate the state change to the TextInput component by making a wrapper for it. It's a good idea to use FlatList for Messages component too.
I've got a app that has a collection of scenes, and make many calls to a remote server that because they control hardware can take quite a while. In my redux store I have a variable that represents if there are any requests inflight.
What I'm trying to achieve is having a spinner or loading scene defined in a single place, and having automatically show dependent on the state of variable in the redux store.
I think that the answer lies in having a modal scene for the loading page, but the bit I'm missing is how to have it automatically displayed (and hidden) based from the state in the store. I don't want to call Actions.loadingScene() from all the places that makes the requests.
I've got a reducer in place that see's all the actions (both the application and the RNRF actions), but I couldn't work how what state I had to mutate to get it to display the modal scene.
Any pointers would be great!.
It appears that redux-saga would be the way to solve this, however I ended up making a HOC that adds the spinner, and displays it when required. It does mean that I have to remember to wrap all scenes with the HOC but that it OK.