What are React components?

React components are reusable pieces of code. They let you split the UI into different pieces, which makes it easier to isolate sections and think about each part separately. This makes building the application easier overall. React components are made up of elements. An element is a block of code that describes how you want something to look.

Components are fully encapsulated and can manage their own state separately. They can then be combined to create more complex UIs. React component logic is written in Javascript, which means that you can easily pass rich data (like JSON files) through your application.

In essence, React components are like using bricks to build a structure. Sure, you could make your own bricks by hand from clay, but it is much simpler and more efficient to use ones that have already been made in a factory. That’s like the difference between using React component libraries or writing the code for your UI from scratch.

Components are great tools for building applications because they are so efficient and easily reusable. Their compartmentalization allows for React applications to be fast, scalable, and simple. For example, updates can be made to a component without affecting any of the others. This allows for developers to build large-scale applications and update specific data without needing to reload the whole app. 

Functional React components

Another way to define components is as a Javascript class or function that returns a React element, in which the element makes up a section of the greater UI. React lets you define components as functions or classes. 

Functional React components are called such because they are literally Javascript functions. An example would be writing a Javascript function that accepts a single “props” object argument with input data, which then returns a React element that describes what you should see on the screen. 

Functional components are stateless; they do not hold or manage state. They are often referred to as presentational components, because all they do is output (or present) UI elements.

React class components

React class components are created using ES6 class syntax. A class component has more features - it requires you to extend from React and render information. In addition to acting as a function that takes input and returns an element, class components also consider internal private states as input.

These components are stateful, because they have the ability to hold logic, state, and more within them. A “state” is an object that determines how the component renders & behaves. A component’s state is what allows it to be dynamic and interactive.

Class components can also be referred to as containers, because they can hold numerous other functional components within them. They require a lot of additional markup, so it is usually best to use a functional component, unless you specifically need to accomplish one of the following tasks:

• Managing local state
• Adding logic for event handlers
• Adding lifecycle methods for your component

Using too many class components when it is unnecessary can have negative effects on performance, readability, maintenance, and testing.

Use PubNub’s React components to build great chat applications

PubNub specializes in enabling developers to build fully-featured chat solutions, so it makes sense that we have created a comprehensive library UI and chat React Components to ensure an easier building experience and faster time to market for developers who build with us. These components are now available as a beta release, so if you'd like to be a tester and have the opportunity to provide feedback, check out our docs for more detailed descriptions of the implementation process, along with best practices.

PubNub React component library

Working with PubNub and using our pre-built components will significantly save you dev time, money, and labor, all while making it easier to scale and grow your application. There’s no need to build additional components or basic architecture, when we’ve already done the work for your React application needs.

Using our components library is one of the best ways to add features to your chat without dealing with the complexities of the low-level infrastructure. Some key benefits to using our React chat components when building with PubNub include:

• Reduced implementation time: You can quickly develop production-ready apps with drag-and-drop components.

• Rich chat features: These components enable features like typing indicators, read receipts, reactions, and more without you having to write complex code.

• Flexibility and customizability: Customize component design and add custom components to extend functionality.

• Scalability: In regular PubNub fashion, these components have no concurrency limits, which means you can grow your chat quickly and reliably as-needed. We have made it easy to implement and change additional features as your use case, users, and monthly usage expand.

• UX themes: There are built-in light and dark themes for various use cases like group, support, and live event chats. There is extra customization available with CSS variables.

We include all of the necessary features to build a great chat experience with our reusable components, such as:

• User and channel metadata: fetch metadata about users, channels, and memberships from PB Objects storage using custom hooks.
• Subscriptions: automatically subscribe to the current channel, with optional subscriptions to other channels and groups.
• Messages: publish and listen to text messages, and fetch history for each channel.
• Presence: fetch present users, listen to new presence, and publish presence events.
• Typing indicators: display typing indicators as text notifications or messages.
• Message reactions: publish and display message reactions (like emojis) for each message.

With these React components, you have the base to build any type of chat available, like live event chat lobbies, multiplayer in-game chat, or a HIPAA-compliant doctor-patient chat. The design, features, and use case can then be customized to fit your needs.