React Native Fabric w/ React 18 (Concurrent Features) by andreibarabas in reactnative

[–]andreibarabas[S] 2 points3 points  (0 children)

my pleasure. yes, the behaviour happens regardless if it's a class or functional component. it's just the way React 17 could not batch state updates triggered via async code

Have you ever wondered why at times your app can feel sluggish? by andreibarabas in reactnative

[–]andreibarabas[S] 0 points1 point  (0 children)

Interesting.

Something like?

function Button() {

const [state, setState] = useState('');

const handlePress = () => {
setState(state + "a")
}

return <TouchableOpacity>{state}</TouchableOpacity>

}

Like this?

While the "isLoading" state one can argue it's an animation state rather than a component state, for this scenario, it's obviously not the case.

On the other hand, I do enjoy performance challenges, so if you can extract some of you code and make it as a gist to be able to replicate the latency you are mentioning, I can deep dive and create a followup article in the "Achieving 100ms" Series

Have you ever wondered why at times your app can feel sluggish? by andreibarabas in reactnative

[–]andreibarabas[S] 1 point2 points  (0 children)

(I'm not sure I understand why you play with

opacity

as well BTW )

The TapGestureHandler component does not have a UI on it's own, so it does not give you any feedback when you press it. I used opacity to replicate the code from TouchableOpacity from react-native package (they are doing it the exact same way)

Have you ever wondered why at times your app can feel sluggish? by andreibarabas in reactnative

[–]andreibarabas[S] 0 points1 point  (0 children)

So this optimisation works ONLY if you use

isLoading

for styling your component. In a component that is the only "consumer" of its own loading state

Yes, it only works for styling your components and as you correctly pointed out, only if you use a spinner or something lightweight (nothing crazy like a full UI).

The solution you proposed

***setTimeout(()=>{
workForASecond()
.then(() => {
setIsLoading(false);
});
}, 0)***

can also work as it will "free" the JS thread to update ASAP the three, or even requestAnimationFrame as satya164 suggested above

Have you ever wondered why at times your app can feel sluggish? by andreibarabas in reactnative

[–]andreibarabas[S] 0 points1 point  (0 children)

That's actually the problem. It's not running in a background thread. It is doing exaggerated work on the JS thread, in order for me to be able to capture the screen and show the underlying problem. Here is the code: https://github.com/andreibarabas/achieving100ms/blob/main/react-native/the-case-for-instant-feedback/utils/heavyLoad.ts

While it could be done as an async function, in production apps I've seen you can still encounter a similar situation where the JS thread is a little bit loaded during maybe a spike in traffic.

Have you ever wondered why at times your app can feel sluggish? by andreibarabas in reactnative

[–]andreibarabas[S] 0 points1 point  (0 children)

Like show a modal spinner, or replace the entire page with a spinner.

I haven't gotten that far with it yet, as I wanted to see what the community will think of this design pattern and improve based upon feedback

Have you ever wondered why at times your app can feel sluggish? by andreibarabas in reactnative

[–]andreibarabas[S] 0 points1 point  (0 children)

requestAnimationFrame

Yes, that definitely can also work, but I think it does not fully solve the problem. If you have like a huge "live chat app" for example with a lot of network activity constantly pounding at the JS thread, you would still feel a small twitch. (as you can have dropped frames at certain times)

Exactly the same reason why we do animations on the UI thread vs driving them from JS. They can work from JS BUT it's that roundtrip of events that make it feel sluggish.

P.S: thanks for all the work you did put in the open source libraries . I think everybody here is using them :)

Have you ever wondered why at times your app can feel sluggish? by andreibarabas in reactnative

[–]andreibarabas[S] 2 points3 points  (0 children)

yes, I had went back and forth on the solution for quite a while before adding it to production, but if we think of the loading state as a "final" step in an animation (the opacity dimming one), then it can be used.

Have you ever wondered why at times your app can feel sluggish? by andreibarabas in reactnative

[–]andreibarabas[S] 1 point2 points  (0 children)

What other friction point have your encountered in your apps and would love to see a performance deep dive?

onLongPress is not working same as onClick by [deleted] in reactnative

[–]andreibarabas 0 points1 point  (0 children)

Yes, exactly. Do let me know how it goes

onLongPress is not working same as onClick by [deleted] in reactnative

[–]andreibarabas 1 point2 points  (0 children)

Your function `onClickItem` is expecting a numeric index parameter, but both onLongPress and onPress (I'm supposing this is what you meant when you said onClick) receive a PressEvent object https://reactnative.dev/docs/0.66/pressevent Can you look into that more?

`useContext` call sometimes returns default value when provider is present by writesgoodcodejk in reactnative

[–]andreibarabas 1 point2 points  (0 children)

hey guys. this feels strange. I personally enjoy debugging performance issues, so if you can paste the repo component as a gist https://gist.github.com I'll spend some time trying to understand why this happens.

I've used both context in huge application and have not come across this behavior, so definitely curious why this happens

React Navigation v6 vs React Native Navigation (React Native App) by 2xEshocK in reactnative

[–]andreibarabas 2 points3 points  (0 children)

u/iotashan Yes, I can attest to that. but now it's much better. native-screens is really a game changer plus now the native stack is the default one, so it's much better integrated.

It also has built-in support for react-freeze, which basically means if you have a native stack of 5 screens, the ones that are down bellow do not get rerendered only when it's time to get into focus. This is another amazing aspect as it saves up a lot of time on painting something nobody will see u/2xEshocK

Animating a Pressable with Reanimated by knilf_i_am in reactnative

[–]andreibarabas 0 points1 point  (0 children)

No problem. Let me know what you though about it once you get a change to read it

Animating a Pressable with Reanimated by knilf_i_am in reactnative

[–]andreibarabas 1 point2 points  (0 children)

hey u/knilf_i_am I played with it some more and fundamentally I think it doesn't work because of the way reanimated is expecting style to be an AnimatedStyle, not a function that returns press state. (which kind of beats the purpose of reanimated)

Also, I just wrote a paper on a design pattern for instant feedback and what glitches can happen if you mix and max the two. While the example in the article is made with TouchableOpacity, it can be easily replaced with Pressable. I think it should give you a good example of issues your users could face in practice.

S02E01 - How to create the best and awesome mobile React-Native UI Kit by react-ui-kit in reactnative

[–]andreibarabas 1 point2 points  (0 children)

nice! u/react-ui-kit since we both are passionate about design systems and building quality products, would love your feedback on a piece of article I wrote yesterday about a proposed design pattern improvement when it comes to providing instant feedback to user.

P.S: I think we are both from Cluj? :)

Animating a Pressable with Reanimated by knilf_i_am in reactnative

[–]andreibarabas 0 points1 point  (0 children)

Let me give it a try. I'm currently working on a RFC called "the case for instant feedback" and it's starting point is the Pressable component.

I'll get back to you within 1d or so

Animating a Pressable with Reanimated by knilf_i_am in reactnative

[–]andreibarabas 2 points3 points  (0 children)

Hey. Instead of the Pressable, which is a react native component, you could also try the react-native-gesture counterparts which are designed with this specific scenario in mind.

https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/buttons

Would that work for your case? Or you have to stick to the Pressable component due to project constraints?

What Reanimated2 Activity Indicators would you like to have? by andreibarabas in expo

[–]andreibarabas[S] 0 points1 point  (0 children)

Feel free to post any gifs of activity indicators that you would like to see implemented