Personally, i don’t think the term reducer does a great job describing what it does. Think of a reducer as a function that manages changes to an object (in this case the state).
The useReducer hook is used as an alternative to useState. Especially when you have a complex state logic or when the next state depends on the previous one. It accepts a reducer function, and returns the current state paired with a dispatch method.
Functional vs Class Components
It is still useful to know how to define components using either methods. More useful to know how to convert life cycles to hooks and vice versa. Might come in handy at some point. Read more from:
Basically it prevents an error in a part of the UI from breaking the entire app. I really wish i knew this earlier. Its like try/catch blocks but for components.
Error boundaries catch errors during rendering, in life cycle methods, and in constructors of the whole tree below them. This means it can only be written as a class component and has to be used at the top level of your application tree where you want to catch errors.
Components or not
Deciding what part of your application should be a component of its own can be tough at times for people new to React. Apply the single responsibility technique — that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller sub components. Easiest and fastest way i find is to first build a static version of your application with no interactivity. Next find out the parts that are complete on its own and can change overtime as well as the parts that are reused in the entire application. Break those parts identified into sub components and add state and functionalities. Checkout this article — thinking in react
If you liked this article, please hit the claps. Drop your feedback in the comments too. If there are other useful tips or practices you know please share in the comments. If there is something that isn't really useful here, do let me know. Thanks