Tutorials and lessons:
Fixes for some common issues:
You should take the single threaded model into account also when processing a large amount of data. In such case you should break the execution in smaller chunks. This way you reserve the single thread only for a small period of time at once, and you also avoid loading large amount of data to memory at once.
In React your UI consist of a component tree. For example:
App TopBar LeftDrawer Router Posts PostForm SubjectField AuthorField ContentField AddButton PostList Post 1 Post 2 Post 3 Post 4 ... Reports ... SearchRouter SearchPosts ... SearchImages ...
Most of these components should be presentational. That is, they know nothing about application state. They only render themselves by the properties that receive from their parent component, and they also pass along some of the properties to their children. If a presentational component contains some controls that should execute application logic (a button for example), the presentational component typically just calls a function, that it has received from its parent component as a property, when user uses that control.
Some of the components are containers. Container components know about application state, and about operations that are used to alter that state. In a simple application each container component may implement application logic and hold application state inside the component itself by using the state mechanism provided by React. In a more complex application, however, the application state and logic should reside outside the container component, and this is what libraries like Redux and redux-saga are meant for: When should I use Redux.
Additional libraries used in example implementation:
TODO: In the future, use React hooks instead of Redux? Or use Redux with React hooks? Provide React hooks tutorials?