“A JavaScript in a part of the UI should not break the whole app. To solve this problem for React JS Hooks and React JS state users, React 16 introduces a new concept of an “error boundary”. Looking at the code snippet here, it is basically another React component that catches JavaScript Error anywhere in the child component tree. What kind of error does it catch?
Basically, everything related to the UI. If you are a programmer who has been coding with many languages like JavaScript, you may be familiar with try/catch. As React Js’s render function is a declarative rendering which is hard to handle the errors by try/catch.
Error boundary is used to cover the error that might occurs using try/catch by catching all the UI errors during rendering, in the constructor, and in the life-cycle method. But it does not cover all types of errors such as an error in the event handler, an error in a sync code, server-side rendered code, and, of course, an error inside the error boundary component itself.
As of React16, errors that were not caught by any error boundaries will result in unmounting the whole react tree.
The reason behind that:
– Stop broken UI to be delivered
– Promote better feedback to a user when there is an error
– Uncover unnoticeable bug
As we mentioned earlier that it is basically another React component. To apply the error boundary, simply add one of these life-cycle functions into your class component.
As the name implied, it is the build-in React component that suspense all child components from rendering when one of them is not ready, dynamic loading code or fetching data for example, then show a fallback component in the meantime.
As React Suspense and React JS state are built-in components in React, it then renders normally just like other components. Looking at the render tree, when the parent component is rendered the child component will be rendered accordingly.
In the case that Child components have to download the codes or some data such as asynchronous code, the suspense component will be applied as the child component is not ready to be rendered. It will throw the suspense object back to the parent component to put rendering on hold since the child components are not yet ready.
There are a few things you can use React suspense for
“React-Query: is a third-party library that gives React JS & React JS state the state management ability for any kind of asynchronous data. To make a query, define a unique key, and an asynchronous function to resolve data as parameters of useQuery.”
“React JS Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.”
There are up to 10 React JS Hooks API they provided such as useState, useEffect, useContext, useCallback, and useMemo. There are some basic functions for those who want to use React Hook which is useState and useEffect.
UseState is a Hook that lets you add the React JS state to functional components which used to be stateless become stateful.
useEffect is a Hook that you used to tell React that your component needs to do something after render. It gets executed for 3 different React component lifecycles which are componentDidMount, componentDidUpdate, and componentWillUnmount lifecycles.”
“In conclusion, React JS Hooks are functions that let you ‘hook into’ the React JS state and lifecycle features from function components. They are completely on an opt-in basis and 100% backward-compatible. The re-usability of stateful logic is the main benefit of using React JS Hooks.
Even Hooks are a better replacement for Classes, in terms of logic and UI that are easier to separate, but they don’t replace your knowledge of React concepts. It’s more about using current features in a different way, meaning that you still need to get used to the concepts of Props, State (through React JS state), Refs, and Lifecycle to use these features.”
“You might need to be a bit careful when you start to build a project, set up the structure, as there are not so many or only basic requirements at the beginning. The noncareful structure setup can bring you a lot of problems in the long run as the longer the time, the more requirements. There are many factors from a project structure that could cause problems such as:
Overall for the project – What you will see when you start a project.
Components – they are independent and reusable pieces of code that focus on UI.
“You can see it as the building blocks. There are two types of components: class and function”
API – it provides interactions between one software and another.
Containers – they are only concerned with managing data, not UI.
Hooks, Hocs, Context – Hook allows you to use React JS state with other React features without writing a class. A higher-order component (HOC) is an advanced technique in React for reusing component logic. Context is designed to share data that can be considered “global” for a tree of React and React JS state components.
People often ask “How should they structure their project folders?” The answer is no one can really tell you the right answer, it all depends on your preference and your project. There are many ways that you can structure your folder here are some ideas for you:
Generic: The generic-based, centralize everything to the central. Everything that you need can be found in the central.
Feature: The feature-based, all the structures depend on features and are independent of each other. It is mostly used for product features.
Reusability: It is easier to choose the code to reuse for generic-based as everything is all in one place without refactoring. On the other hand, for feature-based, there is a high possibility that the components that need to be reused will be duplicated as all the structures are separated on different features. To avoid duplication, refactoring is needed to be used.
Scalability: To add completely new features, both types are not so different. It needs to be added in many folders for generic-based. For feature-based, you might need to add only to the folder for a feature that we need to implement.
Maintainability: The size of the project can be the key point for generic-based. If the project is big generic-based will not be a good idea as it will be hard to find a specific file you need among 50 files. The big advantage of the feature-based is that it is easy to maintain. As all the structures are separated independently in different features, it is easier to find the file you need.”
Our team of senior frontend developers has expertise in modern web development using proven JavaScript frameworks including React native & React JS!
Take a peek at the coding examples of React JS Hooks, React JS State, and more in our full video on YouTube.