Flash Notes #1 React

This article tries to give a quick recap/snippets of React, ideal for Beginner/Intermediate React Devs.

React

When you read that term, you might think "There must be something special in this library that can be related to the word - React".

You are right.

The way it can be interpreted is: this library "observes and listens" to the state changes done to its own virtual DOM (Document Object Model), compare it with the previous version of that virtual DOM, and "React" accordingly based on that information to make the changes to the real DOM.

This efficient way to update the DOM is called diffing, following the heuristic O(n) approach whereas generic algorithms would require O(n^3) for execution, where n is the number of elements in the tree.

Quick Notes and Snippets

Beginners

  1. Three important hooks:
    i) useState - helps in "inside" app state management. For global state management, Redux or Context API can be referred to.
    ii) useEffect - to execute (side-effect) code based on optional dependencies.
    iii) useLayoutEffect - runs before useEffect but is similar to it. Here, the code is executed before the component (DOM Mutations) is "painted" by the browser.

  2. When using Lists, always provide a key to each element. This provides a nice way for React to know which elements changed while diffing.

  3. Functional Components can return null because null is a valid JSX element, but we cannot return undefined.

  4. Arrow functions help us to define anonymous functions and export functions easily.

  5. We should use Fragments, i.e. <></>, instead of <div> wherever possible, especially during Lists and HTML's <table> to avoid adding additional nodes to the DOM and to not break the HTML semantics.

Intermediate

  1. There are two established approaches for structuring applications:
    i) Function-first - Directories isolated based on functions, e.g. API calls, UI pages, etc.
    ii) Feature-first - Directories isolated based on features, e.g. Login, Chat, Homepage, etc.
    Feature First scales much better and is relatively easier to work on as the application complexity increases.

  2. Improve app performance based on rendering:
    i) Client-side rendering: apply code-splitting, i.e., Lazy Loading + Suspense
    ii) Server-side rendering: use Loadable Components

  3. Use WDYR (Why Did You Render) package, it notifies us about potentially avoidable re-renders. It works with React-Native as well.

  4. Decoupling Logic from React Components is a great idea. For example, decoupling react from renderers is also a great approach, this helps to create a tree of UI which could not only be used on the web but on a mobile environment too.

  5. Adding to the advice above, all we need is a renderer that is able to communicate with the host OS. React Native uses React library, but not ReactDOM as the render. Instead, the package react-native itself is a renderer. To sum it up, for rendering, React uses ReactDOM.render() and React Native uses AppRegistry.registerComponent().

  6. There is also an optional callback function that is invoked when setState is finished and the component gets rendered. Since setState() is asynchronous, the callback function is used for any post-action.
    Note: It is recommended to use lifecycle method rather than this callback function.

setState({ name: 'John' }, () => console.log('The name has updated and component re-rendered'));

I plan on making the next articles either specific topic-based or generalized ones similar to this. Do share your feedback, any suggestions and critics are welcome :)