A Seven Peaks Speaks Summary:

React Query, React JS State, and the importance of structure

A detailed summary on React Query data fetching library for React JS and React JS state by
Seven Peaks Software.

React Query, React JS State, and the importance of structure

React Query data fetching library for React JS and React JS state makes caching and updating server state in your React applications easier. Continue reading below to learn more!

React js logo

Understanding error
boundaries

By Max

Tech Lead – Frontend Development (React JS)
at Seven Peaks Software

What are error boundaries?

“A JavaScript in a part of the UI should not break the whole app. To solve this problem for React JS 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 js logo

“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 Hook 101: useState & useEffect

By Kong

Senior Front-end Developer (React JS)
at Seven Peaks Software

React js logo

“Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.”

Why React Hook?

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

React js logo

“In conclusion, Hooks in React 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 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.”

React js logo

React Project Structure in the real-world

By Mackie

Full-stack Developer
at Seven Peaks Software

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

Generic-basedFeature-based
Reusability😍🤔
Scalability🤔🤔
Maintainability😥😍

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!

See our services

Take a peek at the coding examples of React JS State and more in our full video.

Get Instant FREE Access to our Tech Community!

What you’ll receive:

Latest news, reviews, and insights on emerging technologies

Updates on new job openings

Early invitations to events held at our office

Coding tips and tutorials

Interesting giveaway freebies

Plus much more!

Subscribe below to join our growing tech and design community.

Join!

Do you need help with your frontend development for your project? Get in touch with us below to see how we can help you!

Meet the writers:

Max

Tech Lead - Front-end (React js) at Seven Peaks Software

Max enjoyed showing you his tips & tricks to building Great User Experiences with React-Query.

Kong

Senior Front-end Developer at Seven Peaks Software

Kong will be giving you an introduction to the: What? Why? and How? for the React Hooks!

World

Full-stack Developer
at Seven Peaks Software

Mackie will show you the way to structure your project with React; presenting how a clear structure will help in the maintenance and effort which makes your project more understandable to others.

Rose

Digital Marketing Intern

Rose is a master’s degree student majoring in Marketing and Management who is currently joining Seven Peaks Accelerate program as a Junior Digital Marketing intern at Seven Peaks Software.

Sign up today & start getting tech news.

Get the latest tech trends directly in your inbox each month. And get invited to exclusive events.

    Leave a Reply