Correct way of triggering CSS transitions

[maksymhcode-care]

Hello guys, can you please clarify if usind useState or useReducer is a prefered way of triggering the start of the animation instead of doing it with useSharedValue? Unlike useState, useSharedValue does not trigger a rerender, which one of its strenght

[MatiPl01]

Hey @maksymhcode-care!

Thank you for asking about this. CSS transitions and animations don't use SharedValues at all. To trigger the CSS transition, you have to somehow trigger the render of the component. Because of that, you should ensure that your re-renders aren't very heavy (e.g. you aren't re-rendering the entire screen and just render the component which you want to update).

There is no difference between the use of the useState and the useReducer hook as both trigger renders, so in the end, the final effect is the same.

In general, it's better to keep the state used to trigger the CSS transition as close to the component that you want to update as possible and to divide code into smaller components that manage their own state instead of having one huge component. In such a case, if you follow these rules, re-renders shouldn't affect the performance.