Skip to main content

intro

Let's discover React Ultimate Messenger (Classic & PWA) in less than 5 minutes.

The important things to know!#

Absolute import instead of relative import!#

For the PWA version i was choosed the absolute path method imports.

Explanation:#

In the root folder of your app you have one file:

jsconfig.json

content:

{  "compilerOptions": {    "baseUrl": "src"  },  "include": ["src"]}

This file define the baseUrl to src folder & include it to all path!

example:#

with relative path:

//  It is very difficult to see where the component is!!import useChat from "../../../useChat";

with Absolute path:

// It's always start from src folder, in any case// (but src is include in all path, this is why you dont need to put /src/ before all import)import useChat from "chatComponents/hooks/useChat";

In this method, the path of all component is more readable i find, why i choosed this.

Recoil state manager, basic knowledge needed!#

What is Recoil?#

Developers prefer to use the built-in state management capabilities of React.js over the external global state for the sake of simplicity and compatibility. But there are certain limitations of these built-in solutions, such as-

  • Context API can store only one value and not an indefinite set of values.
  • The component state cannot be shared unless being pushed up to the common ancestor, which might need a huge tree that needs to be re-rendered.
  • These both issues further make code-split the top of the tree difficult from the leaves.

Recoil solves all these problems with its Atoms and Selectors approach as-

“It defines a directed graph orthogonal to but also intrinsic and attached to your React tree. State changes flow from the roots of this graph (which we call atoms) through pure functions (which we call selectors) and into components.”

Recoil provides several capabilities that are difficult to achieve with React alone while being compatible with the newest features of React-

  • Boilerplate-free API
  • Compatibility with Concurrent Mode
  • Distributed and incremental state definition
  • State replacement with derived data without having to modify the components.
  • Derived data can move between being synchronous and asynchronous.

How work Recoil?#

- Atom#

Atoms are the pieces of state. They can be updated and subscribed. Whenever an atom is updated, all the subscribed components of it are re-rendered with a new value You can create atoms by using the atom function, as given here-

const textState = atom({  key: 'textState', // unique ID (with respect to other atoms/selectors)  default: '', // default value (aka initial value)});

Atoms use a unique key for debugging, persistence, and mapping of all atoms. Two atoms cannot have the same key, it will be an error so you need to assign globally unique keys for every atom created.

Atoms use a unique key for debugging, persistence, and mapping of all atoms. Two atoms cannot have the same key, it will be an error so you need to assign globally unique keys for every atom created.

We use useRecoilState hook to read and write an atom from a component. Although it is similar to useState hook in React, you can also share the state between components.

- Selector (optional)#

A selector is a piece of derived state, where ‘derived state’ can be defined as the ‘the output of passing state to a pure function that modifies the given state in some way’. You can declare a new selector as given below-

const charCountState = selector({  key: 'charCountState', // unique ID (with respect to other atoms/selectors)  get: ({get}) => {    const text = get(textState);return text.length;  },});

Selectors also have a unique ID like atoms but not a default value. A selector takes atoms or other selectors as input and when these inputs are updated, the selector function gets re-evaluated.

It is used to calculate state-based derived data which lets us avoid any redundant states because a minimal set of states is stored in the atoms and others are computed as a function of that minimal state. This whole approach is very efficient because the selectors keep a record of components that need them and which state they depend upon.

When we see atoms and selectors in the light of components, they have the same interface and can be substituted for one another. This was a quick go through into Recoil.js, you can check out the deep insights here-

This was a quick go through into Recoil.js, you can check out the deep insights here - Recoil site

You are now ready for the documentation exploration!

Available versions#

Classic version#

The Classic version is a non-stable version, which requires some reorganization!#

You can try Classic React Ultimate Messenger at the Classic version installation tutorial page,

(This version is a bit of a sandbox for the PWA version.)

Any developer who wants to (from beginner, junior or senior) can contribute to the project

PWA version#

The PWA version is stable, the most complete and fully functional version#

You have two demo choices of this version!

See more details of PWA React Ultimate Messenger at the PWA version installation tutorial page.