REACT DIGITAL GARDEN

What is new in My Digital Garden Last Month — (in Jan 2022)

Every month I give updates in my digital garden. On January, I focused mainly on dashboard concepts and performance optimization for re-rendering.

Onur Dayıbaşı

Published in

React Digital Garden

4 min readJan 29, 2022

Menu Improvements

After 50 applications in digital garden, it’s hard to make labeling and grouping. So I decided to make labeling in 2 levels.

First Level : component, dnd, game, layout, no-code, performance, signup, styling, widget
Second Level: changes according to the first level

Also, you can make multiple selections in the first level, and the second level displays the combination of the selected parent menus.

Re-Render Performance with State Change

Here you will find a quick demonstration. This is a sample Re-Render Performance (States) application.

The React component re-renders itself based on several factors. One of them is the State Changes. State change is normally an update related to the inner structure of the component. But it also affects the child components.

You can access the blog posts from this link.

Re-Render Performance with Props Change

Here you will find a quick demonstration. This is a sample Re-Render Performance (Props) application.

The React component re-renders itself based on several factors. One of them is the Props Change. As a higher-order component, “React.memo” can enable a component to be re-rendered only when its props change.

You can access blog posts from this link

Re-Render Performance with useMemo

Here you will find a quick demonstration. This is a sample Re-Render Performance (useMemo) application.

The useMemo will cache the outcome of its calculation, returning the old, cached value rather than a fresh one on each render if the values called with the same parameters are the same. And also recall of the values is prevented.

You can access blog posts from this link

LineChart Responsive

Here you will find a quick demonstration. This is a sample Responsive Line Chart application.

The line chart is responsive, therefore dragging the sidebar ensures achieving a narrow or wide chart. It is still possible to display the whole chart and the information in any case.

Dashboard Simple Layout

Here you will find a quick demonstration. This is a sample Dashboard Simple Layout application.

The Wizard Generator allows generating different charts by inserting different titles. One row contains maximum 2 widgets. If the row has one widget, then the widget fills the whole row otherwise the widget shares 50% of the width.

Dashboard Simple Layout with Columns

Here you will find a quick demonstration. This is a sample Dashboard Simple Layout With Dynamic Column application.

The Wizard Generator allows generating different charts by inserting different titles. In this example, the user also chooses the column count in one row:

One Column: Only one widget can be added to the row
Two Column: Max. two widgets can be added to the row
Three Column: Max. three widgets can be added to the row

Dashboard Widget Sorting

Here you will find a quick demonstration. This is a sample Widget Sorting application.

The Wizard Generator allows generating different charts by inserting different titles. It is possible to sort and organize the charts. The charts can be deleted individually, or all of them can be cleared.