DEV Community: keyvan

building a real-time cryptocurrency info table with React, MUI(material-ui) and coinmarket cap API

keyvan — Wed, 11 May 2022 16:43:50 +0000

We are building a real-time Crypto table that is responsive and shows lots of information about every cryptocurrency using the coinmarket cap API.The app has a simple express backend to fetch the data from the coinmarket cap.
you can checkout the full code
Table of contents:

preparation
- backend
- frontend
- API key
building the backend
building the frontend

preparation

make a folder named crypto-table open your terminal and run the commands:
Powershell:

mkdir crypto-table;cd crypto-table;code .

bash:

mkdir cypto-table && cd crypto-table && code .

that would make a folder and open the vscode

frontend

inside the crypto-table folder open a terminal and install React with CRA:

npx create-react-app frontend

open the src folder and delete everything inside this folder except index.js.
now cd into the frontend folder and install @mui:

npm install @mui/material @emotion/styled @emotion/react react-transition-group

emotion packages are necessary for mui to work

backend

our express backend will be a simple server just to fetch data from the coinmarket cap API.head over to the root folder(crypto-table)and make a folder named backend.inside this folder open a terminal and install express and axios and nodemon:

npm install express nodemon axios dotenv

now we have installed the packages we need to build the project you should have a folder structure like this:

|-- crypto-table
|   |-- backend
|   |-- frontend
        |-- public
        |-- src
            |-- index.js
        |-- .gitignre
        |-- package-lock.json
        |-- package.json
        |-- README.md

API key

visit the coinmarketcap website:

Click the GET YOUR API KEY NOW button. sign up on the website and verify your email. after finish signing up and confirming your email address, it will redirect you to your account page.
if you didn't redirect to the account page visit this link and login.

(it has a generous free plan with 333 calls a day)

when you move the mouse over the API key section it shows a button that copies the key to the clipboard. now you are all set to move to the next section

building the backend

inside the backend folder make two files: server.js and .env.
open the .env file, make a variable and paste your API key like so:

COINMARKETCAP_API='(your_api_key)'

now let's build our express server.
import express and make a simple server that listens on port 4000:

reuqire('dotenv').config();
const express = require('express');
const app = express();
app.use(express.json());
app.get('/', (req, res) => {
  res.send('GET REQUEST');
});

app.listen(400, () => {
  console.log('server is running');
});

on terminal cd inside backend and type:

nodemon server.js

checkout localhost:4000 you should see a text on the screen that says GET REQUEST
the coinmarket cap documentions has lots of information on different endpoints. we'll use
the v1/cryptocurrency/listing/latest endpoint, it returns a sorted list based on the highest market_cap.basically it is the same listing order on their front page.
create an instance of axios with basicURL and your API key.

const api = axios.create({
  method: 'GET',
  baseURL: 'https://pro-api.coinmarketcap.com/v1/cryptocurrency',
  headers: {
    'X-CMC_PRO_API_KEY': process.env.COINMARKETCAP_API_KEY,
    Accept: 'application/json',
    'Accept-Encoding': 'deflate, gzip',
  },
});

The X-CMC_PRO_API_KEY is the coinmarketcap's authentication header parameter.
set the route as /api.now call the API inside the get request
the response has two parameters: status and data.check out the status parameter, it has useful info that you can use in your logic

app.get('/api', (req, res) => {
  api('/listings/latest?limit=20')
    .then(response => response.data)
    .then(value => res.json(value.data))
    .catch(err => console.log(err));
});

visit the localhost:4000 you should see a list of cryptocurrencies

(I am using the json-viewer extension. this is the link you can download the extension from webstore.)

now we have all we need on the server-side. your server.js code should look like this:

require('dotenv').config();
const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

const api = axios.create({
  method: 'GET',
  baseURL: 'https://pro-api.coinmarketcap.com',
  headers: {
    'X-CMC_PRO_API_KEY': `${process.env.COINMARKETCAP_API_KEY}`,
    Accept: 'application/json',
    'Accept-Encoding': 'deflate, gzip',
  },
});
app.get('/api', (req, res) => {
  api('/v1/cryptocurrency/listings/latest?limit=20')
    .then(response => response.data)
    .then(value => res.json(value.data))
    .catch(err => console.log(err));
});
app.listen(4000, () => {
  console.log('express server');
});

the limit at the end gives us the first 20 elements of the list. by default, it returns a list of 100 elements. there is a limit to the free plan on coinmarket API, although it is a generous free plan, I recommend implementing a cache mechanism(like with Redis) and fetching data from API on a specific time interval, then sending back the cache data to the client

building the frontend

create a new file named App.js
we want to use a dark theme for our table. the default theme mode on mui is light, so we need to create a theme and set it to dark mode.
import all necessary dependencies inside the App.js:

//App.js
import React from 'react';
import { createTheme, ThemeProvider } from '@mui/material';

create a theme with dark mode :

//App.js
const theme = createTheme({
  palette: {
    mode: 'dark',
  },
});

now use the ThemeProvider to inject the dark mode. your App.js code should look like this:

import { createTheme, ThemeProvider } from '@mui/material';
import React from 'react';
const theme = createTheme({
  palette: {
    mode: 'dark',
  },
});
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>test</div>
    </ThemeProvider>
  );
}

use the npm start command to spin up the React server. visit localhost:3000you should see a text on the screen that says test.
we are all set to build our Table component.

Table component

we'll use the Table component of mui.under the hood mui uses the native table element. create two files named CoinTable.js, CoinBody.js(that's where the table body resides). first of all import the necessary components:
(we'll show the skeleton component while the data is loading)

//ConinTable.js
import React, { useEffect, useState } from 'react';
import TableContainer from '@mui/material/TableContainer';
import Table from '@mui/material/Table';
import {
  Fade,
  Paper,
  Skeleton,
  TableBody,
  TableCell,
  TableHead,
  TablePagination,
  TableRow,
  Typography,
} from '@mui/material';
import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import CoinBody from './CoinBody';

in this example, we'll use 8 columns of data. let's see the code and we talk about every step:

//CoinTable.js
export default function CoinTable() {
  return (
    <Paper>
      <TableContainer>
        <Table sx={{ minWidth: 700, '& td': { fontWeight: 700 } }}>
          <TableHead>
            <TableRow>
              <TableCell>#</TableCell>
              <TableCell>name</TableCell>
              <TableCell align="right">Price</TableCell>
              <TableCell align="right">24h %</TableCell>
              <TableCell align="right">7d %</TableCell>
              <TableCell align="right">Market Cap</TableCell>
              <TableCell align="right">Volume(24h)</TableCell>
              <TableCell align="right">Circulating supply</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <CoinTableBody />
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        component={'div'}
        rowsPerPageOptions={[5, 10, 20]}
        rowsPerPage={5}
        onRowsPerPageChange={e => ''}
        count={20}
        page={0}
        onPageChange={(e, newPage) => ''}
      />
    </Paper>
  );
}

there are lots of data and functionality going on inside the table body.make a file named CoinTableBody.js.

//CoinBody.js
export default function CoinTableBody() {
  return (
    <TableRow>
      <TableCell>1</TableCell>
      <TableCell align="right">bitcoin</TableCell>
      <TableCell align="right">$42000</TableCell>
      <TableCell align="right">1%</TableCell>
      <TableCell align="right">2%</TableCell>
      <TableCell align="right">$2000000</TableCell>
      <TableCell align="right">$3000000</TableCell>
      <TableCell align="right">$19200000</TableCell>
      <TableCell align="right">$19200000</TableCell>
    </TableRow>
  );
}

Paper: it gives us a nice surface and boxshadow.the default color is #121212
TableContainer:it is a wrapper around the table that gives the table a fluid width
Table: the native table element.as you notice I gave it a minWidth so it wouldn't shrink any fewer than700pixels.I didn't specify any unit that is because mui by default uses pixel for any unitless numbers. if you wish to use rem or any other units you should pass your value as a string like so: sx={{ minWidth: "60rem"}}.the second parameter set the fontWeight on all td elements inside the Table component to 700.if you want to set the sticky header on table you need to specify a maxHeight css property on TableContainer and a pass stickyHeader prop to Table component.
TableHead:thead native element
TableRow:tr native elment
TableCell:td native element.notice we set the TableCell component to align="right" except the first one.it looks much better but it's a matter of opinion you can change it if you want.
TableBody:the tbody native element. that's where the data resign and changes periodically
TablePagination: it is our pagination control with all the good stuff. notice we have implemented the pagination outside the TableContainer because we don't want the pagination to be on the same scrolling area as the table. now the pagination won't scroll with the table on small devices.it has its own scroll bar. use the chrome devtools and toggle the device toolbar, you'll see in small devices the pagination won't scroll with the table while scrolling horizontally. we have hardcoded the count just for now.rowsPerPageOptions receive an array with options that the user can choose from.rowsPerPage is the initial number of rows per page.onRowsPerPageChange and onPageChagne are the functions that we leverage to change our Table UI.

update the App.js file:

import { createTheme, ThemeProvider } from '@mui/material';
import React from 'react';
import Table from './CoinTable';
let theme = createTheme({
  palette: {
    mode: 'dark',
  },
});
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Table />
    </ThemeProvider>
  );
}

right now our markup is finished we have the look and it's time to introduce state and fetch data from our server.

custom hook

create file named hooks-helpers.js.inside this file we implement the hook and a helper function.
open the hooks-helpers.js file. let's build a custom hook that fetches data from API and return the data and an isLoading parameter.

//hooks-helpers.js

function useCoinMarket() {
  const [state, setState] = useState({ data: [], isLoading: true });
  const updateState = data => {
    setState(state => ({
      data: data ? data : state.data,
      isLoading: false,
    }));
  };
  async function init() {
    try {
      const res = await fetch('/api');
      const data = await res.json();
      updateState(data);
    } catch (err) {
      console.log(err);
    }
  }
  useEffect(() => {
    init();
    const id = setInterval(() => {
      init();
    }, 1 * 60 * 1000);
    return () => clearInterval(id);
  }, []);
  return state;
}

notice we have set two fields for the state data, isLoading.the isLoading is true initially so the table would show a skeleton and when the promise is fulfilled, we set the isLoading to false.also you can set a isError property to show some info on screen when there is an error and send a request to an analytic endpoint to log your errors.
we use setInterval to call init every 1 minute to update the table.(change the time as you wish)

this is a side note in regards to different approaches toward calling a function immediately and setting a time interval on the callee, you can skip this part if you want.
there are other interesting ways to achieve immediately calling a function and setting a time interval:

1.using a setTimeout:
function mysetInterval(func, time) {
  func();
  return setTimeout(func, time);
}
we call the mysetInteval with the init function and clearinterval with the return value

using setInterval with IIFE :
setInterval(
  (function mysetInteravl() {
    init();
    return mysetInterval;
  })(),
  1 * 60 * 1000 //you can specify your time
);
it immediately calls the function and then returns itself to be called on the next time interval

Add two state hooks for page and rowsPerPage to handle the pagination state.
pass them to onRowsPerPageChange and onPageChange.notice the onPageChange props callback have two arguments.the second argument is the new page sets by the user.pass rowsPerPage,page to CoinBody component.we have to somehow send the data length to the pagination component(the count prop).in order to achieve that,make a new state hook (dataLength,setDataLength) and pass down the setDataLenght to the coninTableBody and pass the dataLength to count prop.

side note:
We could use the useCoinMarket hook inside the CointTable component. The benefit we gain, is that we have moved the state and data fetching where exactly it's needed(it is widely known as co-locating). the pagination component needs the dataLength and we exchange the data between the paginitaion and CoinTableBody through the parent component(CoinTable)
When we move the data where needed, we can avoid unnecessary re-renders. in this example, only the CoinBody component re-renders on every data fetching, while it won't cause any re-renders on the CointTable and Pagination components

//imports
//.
//.
export default function CoinTable() {
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [page, setPage] = useState(0);
  const [dataLength, setDataLength] = useState(0);
  return (
    <Paper>
      <TableContainer>
        <Table sx={{ minWidth: 700, '& td': { fontWeight: 700 } }}>
          <TableHead>
            <TableRow>
              <TableCell>#</TableCell>
              <TableCell colSpan={2}>name</TableCell>
              <TableCell align="right">Price</TableCell>
              <TableCell align="right">24h %</TableCell>
              <TableCell align="right">7d %</TableCell>
              <TableCell align="right">Market Cap</TableCell>
              <TableCell align="right">Volume(24h)</TableCell>
              <TableCell align="right">Circulating supply</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <CoinTableBody
              rowsPerpage={rowsPerpage}
              page={page}
              setDataLength={setDataLength}
            />
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        component={'div'}
        rowsPerPageOptions={[5, 10, 20]}
        rowsPerPage={5}
        count={dataLength}
        onRowsPerPageChange={e => {
          setRowsPerPage(parseInt(e.target.value));
          setPage(0);
        }}
        page={page}
        onPageChange={(e, newPage) => {
          setPage(newPage);
        }}
      />
    </Paper>
  );
}

now import the custom hook inside the CoinBody.js file.
on the CoinTableBody component we need to extract the proportion of the data based on the number of page and rowsPerPage.isLoading parameter is used to show a skeleton while data is loading.insdie CoinBody make a componenet named BodySkeleton.pass rowsPerPAge and number of heads.

//CoinBody.js
 const CoinTableBody=memo(({ rowsPerpage, page, setDataLength })=> {
  const { data, isLoading, update } = useCoinMarket();
  const dataSliced = data.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
  useEffect(() => {
    setDataLength(data.length);
  }, [data.length]);

  return (
    <TableBody>
      {isLoading ? (
        <BodySkeleton rows={rowsPerPage} heads={8} />
      ) : (
        dataSliced.map(row => (
          <TableRow>
            <TableCell>bitcoin</TableCell>
            <TableCell align="right">$42000</TableCell>
            <TableCell align="right">3%</TableCell>
            <TableCell align="right">2%</TableCell>
            <TableCell align="right">$19200000</TableCell>
            <TableCell align="right">$19200000</TableCell>
          </TableRow>
        ))
      )}
    </TableBody>
  );
})
export default CoinTableBody

we make two arrays based on the rows and head props to map over them and show the skeleton

//CoinBody.js

const BodySkeleton = ({ rows, heads }) => {
  const rowArray = Array(rows).fill(null);
  const cellArray = Array(heads).fill(null);
  return rowArray.map((_, index) => (
    <TableRow key={index}>
      {cellArray.map((_, index) => (
        <TableCell key={index} align={index === 1 ? 'left' : 'right'}>
          {index === 1 ? (
            <Box sx={{ display: 'flex', alignItems: 'center' }}>
              <Skeleton variant="circular" width={25} height={25} sx={{ mr: 1 }} />
              <Skeleton width={100} />
            </Box>
          ) : (
            <Skeleton />
          )}
        </TableCell>
      ))}
    </TableRow>
  ));
};

the body would house lots of data and components so it is wise to move them into a component. make a file named BodyRow.js and change the CoinTableBody like so:

//CoinTableBody.js
 const CoinTableBody = memo(({ rowsPerPage, page, setDataLength }) => {
  const { data, isLoading } = useCoinMarket();
  const dataSliced = data.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
  useEffect(() => {
    setDataLength(data.length);
  }, [data.length]);
  console.log('body');
  return (
    <TableBody>
      {isLoading ? (
        <BodySkeleton rows={rowsPerPage} heads={8} />
      ) : (
        dataSliced.map(row => <BodyRow key={row.id} row={row} />)
      )}
    </TableBody>
  );
});
export default CoinTableBody

the API provides us substantial information about all aspects of cryptocurrency. In this example we are going to show 8 columns of information such as price,24 hours change,7 days change, circulating supply, market cap,24h volumne(make sure to check out other properties too)
there is not much to do in regards to processing the numbers.We show two digits after the decimal point(toFixed(2)).price, market cap, and circulating supply need to be formatted as a currency.
we use the Intl.NumberFormat object hence the numberFormat function(we'll get to it).on percent_change_24h and percent_change_7d,based on being negative or positive, the renderPercentages return our percentages in red or green color with down or up arrows. I've used the default mui theme colors success.main and error.main.check out other fields on their
default themeproperties.
switchTransition with the fade component gives us a nice fading transition effect. Whenever the key property on the fade component changes, the switchTransition triggers the in prop of the fade component.
on two table cells we have used sx with [theme.breakpoints.down('md')].it would introduce a breakpoint that triggers under the 900px width devices.it will set the row number,name and avatar in sticky position so the user can scroll horizantally and see the name alongside other colums.when using sx as a function we can use the theme object.
(https://s2.coinmarketcap.com/static/img/coins/64x64/ is an endpoint on coinmarketcap for coin icons, just add the coin id at the end)

//BodyRow.js
export default functin BodyRow({ row }) {
  const { name, quote } = row;
  const USD = quote.USD;
  const price = numberFormat(USD.price);
  const percent_24 = USD.percent_change_24h.toFixed(2);
  const percent_7d = USD.percent_change_7d.toFixed(2);
  const circulating_supply = numberFormat(row.circulating_supply,{style:'decimal'});
  const marketCap = numberFormat(USD.market_cap, {
    notation: 'compact',
    compactDisplay: 'short',
  });
  const volume_24 = numberFormat(USD.volume_24h);
  const renderPercentage = num => {
    return num > 0 ? (
      <Box
        display="flex"
        justifyContent="flex-end"
        alignItems="center"
        color={'success.main'}
      >
        <ArrowDropUpIcon color={'success'} />
        <span>{num}%</span>
      </Box>
    ) : (
      <Box
        display={'flex'}
        justifyContent="flex-end"
        alignItems="center"
        color={'error.main'}
      >
        <ArrowDropDownIcon />
        <span> {num.replace('-', '')}%</span>
      </Box>
    );
  };
  return (
    <TableRow sx={{ '& td': { width: 20 } }}>
      <TableCell
         sx={theme => ({
          [theme.breakpoints.down('md')]: {
            position: 'sticky',
            left: 0,
            zIndex: 10,
            backgroundColor: '#121212',
          },
        })}
      >
        {row.cmc_rank}
      </TableCell>
      <TableCell
        padding="none"
        sx={theme => ({
          [theme.breakpoints.down('md')]: {
            position: 'sticky',
            left: 48,
            zIndex: 10,
            backgroundColor: '#121212',
          },
        })}
      >
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <Avatar
            src={bit}
            sx={{
              width: 25,
              height: 25,
              mr: 1,
            }}
          />
          <span>
            {name}&nbsp;{row.symbol}
          </span>
        </Box>
      </TableCell>
      <SwitchTransition>
        <Fade key={price}>
          <TableCell align="right">{price}</TableCell>
        </Fade>
      </SwitchTransition>
      <SwitchTransition>
        <Fade key={percent_24}>
          <TableCell align="right">{renderPercentage(percent_24)}</TableCell>
        </Fade>
      </SwitchTransition>
      <SwitchTransition>
        <Fade key={percent_7d}>
          <TableCell align="right">{renderPercentage(percent_7d)}</TableCell>
        </Fade>
      </SwitchTransition>
      <TableCell align="right">{marketCap}</TableCell>

      <TableCell align="right">{volume_24}</TableCell>
      <TableCell align="right">
        {circulating_supply}&nbsp;{row.symbol}
      </TableCell>
    </TableRow>
  );
});

numberFormatfunction returns the number in currency or decimal style.maximumFractionDigits has 3 conditions.

numbers over 1 set to 2 digits after decimal point
numbers with less than 4 digits return the same number of digits after the decimal point
numbers with more than 4 digits return up to 8 digits after a decimal point there other interesting properties on this utility (a great tool for internationalization). We have implemented a default option while we can add an object as a second parameter to modify the default. (for example, on the market cap we set notaion:'compact',compactDisplay:'short', it will display the market cap in the short format followed by a B as in billions sign). we set the style of circulating supply to decimal to show the plain number

//hooks-helpers.js
function numberFormat(num, options) {
  let temp = 2;
  if (num < 1 && num > 0.0001) {
    temp = 4;
  }
  if (num < 0.0001) {
    temp = 8;
  }
  let defaultOptions = {
    style: 'currency',
    currency: 'USD',
    maximumFractionDigits: temp,
    minimumFractionDigits: 2,
    notation: 'standard',
    compactDisplay: 'long',
  };
  return new Intl.NumberFormat('en-US', { ...defaultOptions, ...options }).format(num);
}

I'd be happy to hear from you, let's connect on Twitter

How to solve input delay (lagging) in react

keyvan — Wed, 23 Mar 2022 08:53:20 +0000

we have two options when we are dealing with inputs in react realm:

controlled components :
we update the value of the input by using value prop and onChange event

uncontrolled component :
DOM takes care of updating the input value. we can access the value by setting a ref on the input

There is a chance that you have encountered a situation that whenever you type something into an input or textarea there is a delay (lagging) and the input update is very slow. It is rather annoying and a bad user experience.

This behavior is a side effect of using controlled components. let's see why and how we can mitigate the issue

underlying cause

In controlled components, there is a cycle an input goes through.on every keystroke, we change some state(it could be in a global state like Redux or by useState hook), and React re-renders and set the input's value prop with the new state. This cycle could be expensive. That's why we face a delay while updating the input. another situation would be having a huge component that every keystroke causes the component to re-render.

examples:

there is a complex component (e.g., a big form with lots of inputs), and whenever the input changes, the whole component re-renders
a big web app with state management (e.g., redux, context) that on every keystroke changes something in the store that triggers a re-render of the whole app

bounce, debounce might work?

if we bounce updating the global state and getting back the same value would add a delay making the input much worse. although it would be great to use it with isolated component.bounceing and debouncing is effective whenever we want to call an API and we don't want to fetch loads of information on every keystroke.

solutions

there are a couple of ways that we could address this issue.

Change to uncontrolled component

let's assume we have a component with a couple of inputs :



function ComponentA() {
   const [value1, setState1] = useState();
   const [value2, setState2] = useState();
   const [value3, setState3] = useState();
   const handleSubmit = () => {
      //do something
   };
   <form onSubmit={handleSumbit}>
      <input value={value1} onChange={e => setState1(e.target.value)} />;
      <input value={value2} onChange={e => setState2(e.target.value)} />
      <input value={value3} onChange={e => setState2(e.target.value)} />
   </form>;
}

let's assume we have a component with a couple of inputs. we can change the code to use the uncontrolled component then input doesn't need to go through the re-rendering phase to get the value back.



function ComponentB() {
   const input1 = useRef();
   const input2 = useRef();
   const input3 = useRef();
   const handleSubmit = () => {
      // let value1=input1.current.value
      // let value2=input2.current.value
      // let value3=input3.current.value
      // do something with them or update a store
   };
   return (
      <form onSubmit={handleSubmit}>
         <input ref={input1} />;
         <input ref={input2} />
         <input ref={input3} />
      </form>
   );
}

onBlur

we can update our state (or global state) with the onBlur event. although it is not ideal in terms of user experience



onInputBlur = (e) => {
   //setting the parent component state
   setPageValue(e.target.value);
}
onInputChange = (e) => {
   /*setting the current component state separately so that it will
      not lag anyway*/
   setState({inputValue: e.target.value});
}
   return (
      <input
         value = {this.state.inputValue}
         onBlur = {this.onInputBlur}
         onChange={this.onInputChange}
      >
   )

Isolated component

the optimal solution is to use an isolated input component and manage the input state locally



import { debounce } from 'lodash';
function ControlledInput({ onUpdate }) {
   const [value, setState] = useState();
   const handleChange = e => {
      setState(e.target.value);
      onUpdate(e.target.value);
   };
   return <input value={value} onChange={handleChange} />;
}
function ComponentB() {
   const input1 = useRef();
   const input2 = useRef();
   const input3 = useRef();
   const handleSubmit = () => {
      //do something with the values
   };
   return (
      <form onSubmit={handleSubmit}>
         <ControlledInput
            onUpdate={val => {
               input1.current = val;
               // update global state by debounce ,...
            }}
         />
         ;
         <ControlledInput
            onUpdate={val => {
               input1.current = val;
               // update global state by debounce ,...
            }}
         />
         ;
         <ControlledInput
            onUpdate={val => {
               input1.current = val;
               //update global state by debounce ,...
            }}
         />
         ;
      </form>
   );
}

we have the benefit of having a controlled component and not causing any unnecessary re-renders or going through an expensive one. we can make custom components that check for certain criteria and show success or error messages. now we can implement a bouncing, debouncing mechanism and update the global state or fetch an API. our input speed is natural and we wouldn't cause any unnecessary update or API calling on every keystroke.

I'd be happy to hear from you, let's connect on Twitter

Javascript array methods with examples and combinations

keyvan — Sat, 26 Feb 2022 20:27:11 +0000

introduction

javascript Array object has great tools and methods that we can make use of to achieve optimal data processing needed in our projects. let's walk through one by one and figure out the mechanics, arguments, return statements, etc

concat()

syntax: concat(value1,value2,...)
concatenate two or more arrays and return a new array

let arr1 = ['a', 'b', 'c', 'd'];
let arr2 = ['e', 'f', 'g', 'h'];
let newArr = arr1.concat(arr2); //output:['a','b','c','d','e','f','g','h']
let newArr2 = ['i', 'j'].concat(arr1, arr2); //output:['a','b','c','d','e','f','g','h']

💡Tip: it won't mutate the original array instead return a new one

flat()

syntax:flat(depth)

as the name suggests it will flatten the array by given depth meaning the sub-arrays will be concatenating to form a new array, it removes empty slots(no holes in the returning array). specifying infinity as depth would return an array without any sub-arrays. the default depth is 1

let arr1 = ['foo', 'bar', ['bear', 'claw'], ['orange', ['onion', 'apple']]];
let arr2 = arr1.flat(); //['foo','bar','bear','claw','orange',['onion','apple']]
let arr3 = arr1.flat(infinity); //['foo','bar','bear','claw','orange','onion','apple']

💡Tip: it won't mutate the original array instead returns a new one

fill()

syntax:fill(value,start,end)

start:index number
end: index number

this method changes all elements of the array to a static given value from the start index to an end index.it changes the start index and all the elements between the start to the end except the end index. the end index is exclusive

let arr1 = [1, 2, 3, 4];
let arr2 = arr1.fill(5); //[5,5,5,5]
let arr3 = arr1.flat(5, 1); //[1,5,5,5]

💡Tip: it ==will== mutate the original array

copyWithin()

syntax:copyWithin(target,start,end)

target: index number
start : index number( optional , default : 0 )
end : index number( optional , default : arr.length ,)

shallow copies part of the array to a different location in the same array with the given start and end index and returns the modified array, it will preserve the array length. remember that the end index is not included

let arr1 = ['book', 'chair', 'desk', 'table'];
let arr2 = arr1.copyWithin(1); //['book','book','desk','table']
let arr3 = arr1.copyWithin(2, 1, 3); //['book','chair','chair','desk']

💡 Tip: it ==will== mutate the original array

we'll talk about what shallow copy is and how to deal with it in different situations later in this article

every()

syntax : every(callbackfn)

this method accepts a function as an argument and iterates over every single value in the array and executes the function.every checks every value in the array against a comparison function. if all of the callback functions return a truthy value on each element the every method result would be true

let arr1 = [4, 6, 24, 120, 44];
//check if all items are even
let test = arr1.every((value, index, arr) => value % 2 === 0); // output:true

💡Tip: every returns true for an empty array no matter what the condition is

filter()

syntax : filter((value,index,arr)=> /* ....*/ )

filter returns a new array consisting of elements that have passed a test by the callback function.

let arr1 = [
   { id: 1, product: 'mouse', countInStock: 2 },
   { id: 2, product: 'keyboard', countInStock: 0 },
   { id: 3, product: 'monitor', countInStock: 0 },
   { id: 1, product: 'watch', countInStock: 4 },
];

let arr2 = arr1.filter((el, index) => el.countInStock > 0);
// output:[
//  {id:1,product:'mouse',countInStock:2},
//  {id:1,product:'watch',countInStock:4}
// ]

💡 Tip: it won't mutate the original array instead returns a new one

find()

syntax : find((val,index,arr)=>/* ... */)

find method iterator over an array and returns the first item that satisfied the testing function otherwise returns undefined

let arr1 = [
   { id: 1, product: 'mouse', countInStock: 2 },
   { id: 2, product: 'keyboard', countInStock: 1 },
   { id: 3, product: 'monitor', countInStock: 4 },
   { id: 1, product: 'watch', countInStock: 4 },
];

let element = arr1.find((item, index) => item.countInStock > 3);
// output:{id:3,product:'monitor',countInStock:4}

findIndex()

syntax : findIndex((item,index)=>/* ... */)

findIndex iterates over the array and returns the ==index== of the first element that satisfies the testing function otherwise this method returns ==-1==.

let arr1 = [
   { id: 1, product: 'mouse', countInStock: 2 },
   { id: 2, product: 'keyboard', countInStock: 0 },
   { id: 3, product: 'monitor', countInStock: 4 },
   { id: 1, product: 'watch', countInStock: 4 },
];

let element = arr1.findIndex((item, index) => item.countInStock > 7);
// output: -1
let element = arr1.findIndex((item, index) => item.countInStock > 0);
// output: 0

forEach()

syntax : forEach((item,index)=> /* ... */)

forEach() execute the function that is provided on each element.forEach always returns undefined.

let arr1 = [
   { id: 1, product: 'mouse', countInStock: 2 },
   { id: 2, product: 'keyboard', countInStock: 0 },
   { id: 3, product: 'monitor', countInStock: 4 },
   { id: 1, product: 'watch', countInStock: 4 },
];

let element = arr1.forEach(
   (item, index) => item.product === 'mouse' && item.countInStock--
);
// arr1=[
//    {id:1,product:'mouse',countInStock:1},
//      {id:2,product:'keyboard',countInStock:0},
//      {id:3,product:'monitor',countInStock:4},
//      {id:1,product:'watch',countInStock:4}
//]

there is no way to break out of forEach loop

includes()

syntax : includes(value,fromIndex)

fromIndex : index number (default : 0) includes determines whether the given value is included in the array if so returns true or else false. we can give a second argument (formIndex) to specify an index as a start searching point

let arr1 = ['MONEY', 'laptop', 'rug'];
let test = arr1.includes('Money'); // output:false

💡Tip: includes is case sensitive

indexOf()

syntax : indexOf(value,fromIndex)

fromIndex -> default : 0

it's a fairly known method that returns the first index at which the value is located. remember if there are a bunch of items with the same value and you haven't specified the second argument (fromIndex), indexOf returns the first index.in case indexOf couldn't find anything, it would return -1. the second argument specifies where indexOf should start the search

fromIndex is inclusive

let arr1 = ['MONEY', 'monitor', 'laptop', 'rug', 'book', 'laptop'];
let arr2 = arr1.indexOf('MONEy'); // output:-1
let arr3 = arr1.indexOf('laptop', 2); // output:2
let arr4 = arr1.indexOf('laptop', 3); // output:5

💡indexOf is case sensitive

join()

syntax : join(separator)

joining array items separated by , or the given separator

let arr1 = ['2022', '23', '2'];
let str = arr1.join(); // output:2022,23,2
let str = arr1.join('-'); // output:2022-23-2

lastIndexOf()

syntax : lastIndexOf(item,fromIndex)

fromIndex -> default : array.length - 1

it is the same as indexOf with a little hint, lastIndex search backward meaning that the fromIndex default value is array.length - 1 so any value above array length would return -1 (not found).

fromIndex is inclusive

let arr1 = ['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book', 'laptop'];
let arr2 = arr1.lastIndexOf('MONEy'); // output:-1
let arr3 = arr1.lastIndexOf('laptop', 3); // output:2 starting at index 3
// searching backwards

let arr4 = arr1.lastIndexOf('laptop', 4); // output:4 fromIndex is inclusive

💡indexOf is case sensitive

map()

syntax : map((item,index,array)=> /* ... */)

a method to iterate over an array and perform a callback function on each item and return a ==new== array with the values provided by the callback function and the same length as the original array.it is one of the most used methods, especially in javascript frameworks and libraries (e.g React,..).

// order list
let arr1 = [
   { id: 1, product: 'mouse', quantity: 2, price: 40 },
   { id: 2, product: 'keyboard', quantity: 0, price: 150 },
   { id: 3, product: 'monitor', quantity: 4, price: 500 },
   { id: 1, product: 'watch', quantity: 4, price: 1000 },
];

let arr2 = arr1.map(({ product, quantity, price }) => ({
   product,
   total: quantity * price,
}));
// output:[
// {product:'mouse',total:80 },
//  {product:'keyboard',total:300},
//  {product:'monitor',total:2000},
//  {product:'watch',total:4000}
// ]

💡Tip: it won't mutate the original array instead returns a new one

pop()

syntax : pop()

removes the last element of the array and returns the element.

let arr1 = ['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book', 'laptop'];
let el = arr1.pop(); // output:laptop
// arr1=['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book']

💡Tip: it will mutate the original array

shift()

syntax : shift()

removes the first element of the array and returns the element

let arr1 = ['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book', 'laptop'];
let el = arr1.shift(); // output:MONEY
// arr1=['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book']

💡Tip: it will mutate the original array

push()

adds one or more elements to the array .returning the new length property value

let arr1 = ['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book', 'laptop'];
let el = arr1.push('flask', 'chair'); // output: 9
// arr1=['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book','flask','chair']

reverse()

reversing an array and returning a reference to the mutated array.

let arr1 = ['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book', 'laptop'];
let el = arr1.reverse(); // output: ['laptop', 'book', 'laptop', 'mouse', 'laptop', 'monitor', 'MONEY']
//  el === arr1 -> true

💡Tip: it will mutate the original array

some()

syntax : some((item,index,array)=>/* ... */)

some implement a test function on every element, if an element passes the test some returns true

let arr1 = [
   { id: 1, product: 'mouse', quantity: 2, price: 40 },
   { id: 2, product: 'keyboard', quantity: 0, price: 150 },
   { id: 3, product: 'monitor', quantity: 4, price: 500 },
   { id: 1, product: 'watch', quantity: 4, price: 1000 },
];

let test = arr1.some(item => item.price > 500); // output: true

💡 Tip: returning any truthy value in the test function would amount to ture output

sort()

syntax : sort((firstEl,secondEl)=>/* ... */)

accept a function as an argument (optional), comparing elements of an array and returning a reference to the sorted array.
different situation based on the return value of the function:

1: firstEl is bigger than secondEl
-1: firstEl is smaller than secondEl
0: firstEl is equal to secondEl by default, sort is a little bit tricky because it converts everything to string then sorts them out.

let arr1 = [3, 10, 288, 2];
let sorted = arr1.sort(); // output: [10,2,288,3] !!!

the best practice is to implement our testing function

let arr1 = [3, 10, 288, 2];
let ascending = arr1.sort((first, second) => first - second); // output: [2,3,10,288]
// or
let descending = arr1.sort((first, second) => second - first); // output: [288,10,3,2]

💡Tip: it will mutate the original array

slice()

syntax : slice(start,end)

making a shallow copy and returning a new array. both start and end are optional and the default is start:0, end:array.length but when specified, slice makes a shallow copy (don't worry we'll talk about shallow copy) of the array from start to the end that we specified. there is a little hint, the end is not included
it's one of the most frequently used methods in libraries/frameworks just because of the fact it won't mutate the original array.

let arr1 = ['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book', 'laptop'];
let arr2=arr1.slice() // output:['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book', 'laptop']
let arr3=arr1.slice(1,4) :// output:['monitor', 'laptop', 'mouse']

💡Tip: it won't mutate the original array instead returns a new one

splice()

syntax : splice (( start , deleteCount , item1 , item2, ...))

deleting or adding items to the original array. splice will change the length and items of the original array and returns the modified array as a reference to the original array.

the first argument is the index at which we want to start -> default : 0
the second argument is how many items we want to delete -> default: array. length - start
third argument and so are items that we want to add to the array. if there are no items it would just delete the items that we specified.

let arr1 = ['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book', 'laptop'];
let arr2=arr1.slpice(1,2) // output:['MONEY', 'mouse', 'laptop',book', 'laptop']

//or

let arr3=arr1.splice(1,2,'chair','honey') :// output:['MONEY','chair','honey', 'mouse', 'laptop',book', 'laptop']
// arr1 === arr3  ->  true

// or

let arr4=arr1.splice(1) // output: ['MONEY']
//arr1===arr4 -> true

💡Tip: it will mutate the original array

ushift()

syntax : unshift(item1,item2,....)

adds items to the beginning of the original array and returning the length of the modified array

let arr1 = ['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book', 'laptop'];
let test = arr1.unshift('chair', 'desk'); // output:9
// arr1=['chair','desk','MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book', 'laptop']

💡Tip: it will mutate the original array.

toString()

syntax: toString()

converts the items of the array to string and joins them by comma

let arr1 = [4, 5, 'chair'];
let test = arr1.torString(); // output:'4,5,chair'

flatMap()

syntax : flatMap((item,index,array)=>/* ... */)

it is a map() followed by the flat() method with a depth of 1.
it executes the function on each item of the array and then flats the array by one level then returns the flatted array.

let arr1 = [1, 2, [3, 4], [5, [6, 7]]];
let arr2 = arr1.flatMap((item, index) => (item.isArray ? item * 2 : item[0] * 2)); // double the items if it's an array double the first item
// output : [ 2, 4, 6, 4, 10, [6, 7] ]

reduce()

syntax : reduce((acc,cur,index,array)=>/** ... */,initialValue)

reduce execute a function on each item of an array then pass the return value to the next function as the first argument(acc).
the final result would be the last value returned by the function executed on the last item of the array(last acc)

with initialValue: sets initalValue as the acc on the first element
without initalValue: sets acc as the first item of the array and cur would be the second item. it starts from the second index

let arr1 = [
   { id: 1, product: 'mouse', quantity: 2, countInStock: 0 },
   { id: 2, product: 'keyboard', quantity: 0, countInStock: 7 },
   { id: 3, product: 'monitor', quantity: 4, countInStock: 6 },
   { id: 1, product: 'watch', quantity: 4, countInStock: 0 },
];
let countAll = arr1.reduce((acc, cur) => acc.countInStock + cur.countInstock); // output:13

reduceRight()

syntax : reduceRight((acc,cur,index,arry)=>/* ... */)

it's the same concept as reduce with a little bit of difference.reduceRight would start from right to left
functionality is the same but starting index is the last index of the array moving forward to the first index.

let arr1 = [1, 2, -3, -4, 5];
let reducer = arr1.reduce((acc, cur) => (acc -= cur)); // output: 1
let reducerRight = arr1.rudeceRight((acc, cur) => (acc -= cur)); //output: 9

Array.from()

syntax : Array.from(array-like,mapFunction)

it's an instance method that creates a shallow copy from an array-like
for example, when selecting a nodelist (span, div,...) the result is an array-like object that we can make a shallow copy by Array.form()
second argument (mapFunction) is optionalArray.from(array-like,mapFunction) is the same as Array.from(array-like).map(mapFunction)

let nodes = document.querySelectorAll('span');
let spanArray = Array.from(nodes); // now we can use any array method on the spanArray

Array.isArray()

syntax : Array.isArray(value)

it's a useful method to check if the given argument is an array or not

let test = Array.isArray(3); // false
let test2 = Array.isArray({ foo: 'bar' }); // false
let test3 = Array.isArray([1, 2, 3]); // true

Array.of()

syntax : Array.of(value1,value2,...)

creates an array by given values

let arr1 = Array.of(1, 2, 3); // [1,2,3]
let arr2 = Array.of([1, 2], { id: 1, product: 'mouse' }); //[[1,2],{id:1,product:'mouse"}]

there are other array methods :

enteries()
keys()
groupBy() (it is not supported by major browsers yet)

you can click the link to learn more about them but it's safe to say that it's used in special circumstances.

combinations

now it's time to see them in action and how we can leverage array methods and combine them to come up with interesting ways for data manipulation

filter, indexOf

question: an array consists of elements that are in both arr1 and arr2.

let arr1 = ['MONEY', 'monitor', 'laptop', 'mouse', 'laptop', 'book', 'laptop'];
let arr2 = ['money', 'mouse', 'chair', 'desk', 'ice', 'case', 'monitor'];

let result = arr1.filter((item, index) => arr2.indexOf(item)); // [''mouse',monitor']

every, slice

question : find out if the first five or the last five elements of an array are the same if any return start or end otherwise return false

let arr1 = [
   'black',
   'black',
   'black',
   'black',
   'black',
   'black',
   'red',
   'red',
   'green',
   'black',
   'black',
];

function checkStartorEnd(arr) {
   let start = arr1.slice(0, 6).every(item => item === arr1[0]);
   let end = arr1
      .slice(arr.length - 5, arr.length)
      .every(item => item === arr1[arr.lenth - 1]);
   return start ? 'start' : end ? 'end' : false;
}

reduce, map

question: sum of goods in electronics

let arr1 = [
   { id: 1, product: 'mouse', dept: 'electronics', countInStock: 3 },
   { id: 2, product: 'keyboard', dept: 'electronics', countInStock: 7 },
   { id: 3, product: 'monitor', dept: 'electronics', countInStock: 6 },
   { id: 4, product: 'watch', dept: 'electronics', countInStock: 9 },
   { id: 5, product: 'chair', dept: 'furniture', countInStock: 8 },
   { id: 6, product: 'desk', dept: 'furniture', countInStock: 15 },
   { id: 7, product: 'sofa', dept: 'furniture', countInStock: 4 },
];

let result = arr1
   .filter(item => item.dept === 'electronics')
   .reduce((acc, cur) => acc + cur.countInstock, 0);//25

Now it's your turn,show us your ninja skills, how would you combine them ??

follow me on Twitter I'd be happy to hear from you

REACT APIS WITH EXAMPLE PART1:React.memo()

keyvan — Wed, 16 Feb 2022 08:23:28 +0000

introduction

A fast and reliable user interface (UI) is an important factor in modern web development. To improve performance React offers several APIs.

React.memo() is a high-order component that wraps around our functional component and returns a memoized version. whenever users interact with the UI React re-renders the component and compares the previous component to the next one.
if it is not the same then React would update the DOM with the new one (re-rendered component).

const MemoizedComponent=React.memo(Mycomponent)

let's explore this API through an example. let's say we want to present a input wuth a heading or labels
whenever we change the input whole section get re-rendered(the heading or any other component) but in fact it's a unnecessary re-render

this is where React.memo() comes to the rescue!.it wraps around the Heading component and gives us a memoize result back.in simple terms, it gives us a rendered component and it will use the result on the next DOM update unless the component props have changed.
type something in the input. heading wrapped around memo is not re-rendering

areEqual

React.memo() accepts a second argument:


const memoizedComponent=React.memo(MyComponent,function areEqual(prevProps,newProps) 
        {
        // compare logic
        // return true of false
       })

it passes prevProps and newProps to the function giving the ability to the developer to decide when to re-render the component.

💡 areEqual function must return true or false
returning true means no re-rendering returning false cause re-rendering

Remember React.memo() does a shallow comparison, it means if there are complex arrays or objects as props it always returns false, therefore, need to add a custom function(areEqual) to compare complex objects and arrays

when to use

whenever dealing with middle or big size components that consist of a couple of small size components and they keep re-rendering the same result over and over

when not to use

if the component updates occasionally and it wouldn't make much difference using a memoized version.

conclusion

although React does a lot of optimization internally but React.memo() gives the ability to the developer to define more suitable optimization. remember using React.memo() is not the solution to every performance issue. implementing a good design pattern and data structure is the key factor in optimization.

follow me on twitter😎

Carousel with little to zero JavaScript using flexbox and overflow

keyvan — Sat, 05 Feb 2022 17:13:48 +0000

Introduction

Carousel is one of the essential parts of modern web development.
We see it everywhere, and it is important to understand the mechanics. In this article, we discuss how to write one with minimal effort.

html

First of all, we need to write some HTML.

<div class="carousel-wrapper">
         <button class="left"> < </button>
         <div class="carousel">
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=1" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=2" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=3" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=4" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=5" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=6" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=7" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=8" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=9" />
            </div>
            <button class="right"> > </button>
         </div>
      </div>

our HTML code is fairly straightforward. it consists of our carousel-wrapper and three children. two of them are our button control(class=button) and the other one is the actual carousel with our items.

styling

We need to set the display of our carousel-wrapper to flexbox so we can have our buttons aligned horizontally next to the carousel items display:flexbox
Let's see all the properties on our stylesheet, and then we'll talk about them.

html {
   font-size: 62.5%;
}
body {
   box-sizing: border-box;
}
.carousel-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
}
.carousel {
   width: 90vw;
   display: flex;
   overflow-x: scroll;
   scroll-behavior: smooth;
   /* use this property to hide the scrollbar on firefox */
   scrollbar-width: none;
}
/*  use this pseudo class to hide the scrollbar on chrome */
.carousel::-webkit-scrollbar {
   display: none;
}
.item {
   flex-basis: 20%;
   flex-shrink: 0;
   padding: 1rem;
}
.left,
.right {
   border: none;
   background-color: transparent;
   cursor: pointer;
   color: brown;
   font-size: 5rem;
   overflow: hidden;
   z-index: 100;
}
img {
   width: 100%;

}

There are two major properties On the carousel:display: flex overflow-x:scroll.
These properties help us achieve the carousel effect we need. I prefer using VW for width because it changes based on the viewport width, but it is optional, and you can choose any value you'd like.
scrollbar-behavior gives us a smooth scrolling experience. Firefox and Chrome have different behavior when it comes to hiding the default scroll bar, scrollbar-width:none works perfectly on Firefox and get rid of the scrollbar for us. For chrome, we need to use ::-webkit-scrollbar pseudo-class and set the display to none to get the same result.

flex-basis:20% practically tells the browser that every item should fill 20 percent of the flex container(.carousel) essentially it means showing five items each time based on the device size.
The default browser functionality is to shrink all items to fit the container, we have to set to zero flex-shrink:0 to make sure it doesn't shrink the items less than what we specified on flex-basis of flex-shrink is 1, we have to set to zero, so the browser doesn't shrink the items to fill the container.
The rest is self-explanatory.

javascript

our javascript code is short and simple. we want our buttons to have the functionality to scroll our scroll box, it can be achieved by the scrollleft property on the carousel element

let carousel = document.querySelector('.carousel');
let left = document.querySelector('.left');
let right = document.querySelector('.right');
let item = document.querySelector('.item');
(function () {
   right.addEventListener('click', function (e) {
      carousel.scrollLeft += item.clientWidth;
   });
   left.addEventListener('click', function () {
      carousel.scrollLeft -= item.clientWidth;
   });

The scroll moves as much as the item width when the buttons are clicked. You can change the value depending on how much you'd like the scroll to move.

The purpose of this article was to show how simple the carousel could be and there is no need for a big library and as the project grows we can add other functionalities like autoplay, indicators, ...

Follow me on twitter