What I learnt developing with ReactJS

React, one of the most sort after library of recent times! According to Stackoverflow 2020 Developer Survey, ReactJS is voted the second most loved framework and tops the chart of the most wanted frameworks. Following the trend I started learning ReactJS and here is what I learnt along the way.

1. ReactJS is nothing but a view library.
   ReactJS is another MVC framework which concentrates on just the ‘V’ and not on ‘M’ and ‘C’. Ergo looking for Model and Control in ReactJS would make the code a hot mess.
2. Keeping Components Small
   The most obvious thing as a developer one must keep in mind. Now how small should the components be? It mainly depends on your team and on the project requirements. But keeping it as small as possible is really viable. Keeping components small helps even while debugging and also during scaling up of the project.
3. Writing functional components
   The main benefits of functional components is that it makes the code easier to read, understand and follow. It might not matter a lot if you’re working on a solo project but when you’re working in a group, this lessens the burden on the whole team. Even if there’s a new dev on team, it’ll be easier for them to get acquainted without a fuss. Refs are a convenient way for a component to look up it’s children and communicate with them which is not the right approach in React ergo functional components restrict having ref assigned to it . Refs encourage almost jquery like way of writing components, taking restricts the functional, one way data flow flow for which React was preferred in the first place! Also functional components are easy to test!
4. Stateful vs Stateless components aka Container vs Presentational Components
   Which one should I use, Stateless or Stateful components? This question always lingers. Stateful component keeps track of the information itself, instead of just taking it via props and outputting it. When you have a dynamically changing data, always have a parents component that stores all the data and pass it down to the children when needed. Now how is this useful? When there’s some issue regarding state management one can always check the parent component instead of checking each child component individually. Makes debugging easy, innit? If information is completely static and one is sure that it will never change, presentational component is the goto! Both Stateful and Stateless components are reusable. One needs to question certain things as to:
   - How to minimize the number of components that are holding the state?
   - Can a child component keep track of the state without the interference of the parent component?
   The answer to the first question is project dependent while answering the second question, consider filling a form. In this scenario, the child component keeping track of the state makes sense. The parent could data like the requests made by the user. This makes things much simpler.
5. Using React and Redux Dev Tools
   The React dev tools lets one inspect the rendered tree of React elements which helps in seeing how things actually look in the browser. The Redux dev tools are quite intrusive for they allow one to see every action that has happened also the state changes that they have caused. This could be added either as a dependency or as a chrome extension.
6. Using Redux
   This is quite a powerful application state management library that follows the ideology of Flux. So what makes Redux better?
   - When an UI event happens the components call the props which are given as callback functions
   - This creates and dispatch actions based on the particular event
   - There is a single store where the new state is stored
   - The components receive this new state and re-render when needed
   - The API is simpler and well-documented which makes it quicker and easier to understand the flow of actions. — The reducers are pure functions which give newState (oldState + action = newState) making all the business logic and state transitions easy to test.
   Redux implements them in a clean and efficient manner making it easier to work with.

Hoping to explore more and add a few more points soon!