Building simple components using React library

A library is collection of interrelated programs that are useful to solve a specific purpose. The React library purpose is to render the view in an efficient way.

React Component

React components are building blocks of the react App. The below example is about creating posts and the created posts are shown in a list. The functionality is divided into building blocks of React Components. React components can contain other React components to form the tree.

Props

React components rendering is dependent on the props(data). React components has to be coded in such a way they would react to the props. The below line is an expression written in JSX format.

<div>{ props.showBlock ? <Block/>: null</div>

Block is a React component. The block component is in the UI is rendered based on the props.showBlock value. The props.showBlock true renders the component where as false make it disappear.

ReactDOM

ReactDOM is package of React and it is used to render the React components in the DOM.

Unidirectional work flow in React

The views are rendered based on props, and the props or data can be recalculated when an event occurs. This helps to have a Unidirectional workflow. This workflow causes predictable rendering in the react. As the rendering is based on data, changes in the view can be done by changing data.

Unidirectional React flow

Posts List Example

Create post will add the new post to the list of items. List of items are shown from latest to oldest order.

This example has following React components

App Component

Create Post

1. Editor
2. Button

Post Items

1. Item

All this items are organized in a tree as show below. The data is in the form of props are passed from parent. Its good to separate props and components and pass the props from Root component, so we can control all rendering in the app using props.

App Component

Events

In order to capture the events in children function from parent its good to pass function references as props to children . The child components call this function on events. So onChange and CreatePost are passed from the root component. Its good to save all the data at one place outside of the React Tree. This props are passed to React Tree to render through ReactDOM.render.

Rendering in App

Capture input event

On input change the data has to be saved in the data we maintain outside. We pass the onChange function as part of the app and capture it. The captured input is passed to the editor as it needs to be re rendered with new data.

One thing to note here is as we render again, all components will be re rendered as the data changed.

input change

React.memo

We can avoid unnecessary renders using React.memo. This will help to re render a component only if the props changed by doing shallow compare. Use React.memo wisely only if you have any performance issues to avoid overhead of comparison.

Using React Memo

Add an item on click

On click event the data is recreated with new Item by discarding the old data and rendered again.

Create Post on button click

Source code

Points to note

1. React is a library which decouples rendering into DOM by abstracting it into React Components. It renders actual DOM only if it is needed.
2. A component rendering should depend on props most of the times
3. Pass the function reference through props from parent to children to detect events
4. Change the props at root level will render all components unless we use React.memo or similar workflow
5. Don’t worry about multiple renders as props change unless there is visible performance issues