Skyrockets
A community exploring the digital world
Image for post
Image for post

In this guide we will learn about Recoil.js, a new library for React for efficient state management and better component rendering cycles.

This guide is an extraction from the official documentation you can check here if you want full information here

What is Recoil.js

Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. Atoms are units of the state that components can subscribe to. Selectors transform this state either synchronously or asynchronously.

Recoil.js composed of ATOMS and SELECTOR

1. Atoms: Atoms are units of the state. They’re updateable and subscribable: when an atom is updated, each subscribed component is re-rendered with the new value. They can be created at runtime, too. Atoms can be used in place of React local component state. …


Image for post
Image for post

Demo: https://www.youtube.com/watch?v=7i4sT1B1yz8

Required basic understanding of :

  1. React / React Native
  2. React Hooks

What we will be creating

  1. Video calling application for Android + IOS
  2. Implementing webRTC using package “react-native-webrtc”
  3. Using Websockets for signaling
  4. Using UI components from ‘react-native-paper”

Note: In this guide, we will only implement the frontend part, there will be no guide for backend i.e handling socket events and other backend work.

webRTC is a great tool for establishing real-time communication over web. In this guide we are going to implement webRTC in a React Native mobile application using package react-native-webrtc, basically, this package is an adapter which exposes webRTC classes like RTCPeerConnection ,Media Streams etc. …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store