React JS Hooks and the importance of structure

What are error boundaries in React JS Hooks?

“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.

Why do we need it?

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.

What is React suspense?

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

• It allows Dynamic component loading with React.Lazy.
• It lets data fetching libraries deeply integrate with React.
• It lets you orchestrate intentionally designed loading states.
• It helps you avoid race conditions.”

“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.”

Why React JS Hooks?

• “Simplified Component – It is easier to code components
• Reusing stateful logic – Hook allows you to put two different logics in one place
• Class is confusing – As it is Prototype-based inheritance, not object-oriented inheritance.
  
  

How?

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.”

Thinking of project structure

“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:

• Folder structure – Familiarity to the structure can affect how efficiently the developer would code. The new project joiner might not be familiar with the project structure.
• Familiarity with tools – as React is only a library that requires many other tools to support such as redux-thunk, redux-saga, formik, react-hook-form, and react-query.
• New maintainer (or new team member) – it is quite normal for the project that takes a long time to change or add more project maintainers. The new maintainers might not have much information about the project same as the older ones.
• Documentation – it might be difficult for developers to find the code of the feature as each product has different features.

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.

• Helpers
• Utilities
• Testing
• Store
• Translations
• Assets
• Styles
• Pages
• Constants
• Layouts
• Router
• Storybook
• Types
  
  

How to structure your project’s folder?

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.

Comparison

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.