DEV Community: Labeeb Ahmad

ReactJS: How to customize styles of Material UI AutoComplete Dropdown

Labeeb Ahmad — Tue, 11 May 2021 10:19:23 +0000

In this post I'll explain, how you can change background of Material UI dropdown. However this way you can add any other css for dropdown as well.

Autocomplete component of Material UI has a prop named PaperComponent. You can change background of dropdown using this prop.

Here I am passing a Paper component inside PaperComponent prop and setting its background to yellow using style prop.
My list will now be rendered inside it, and dropdown's color will be yellow

      <Autocomplete
        id="combo-box-demo"
        options={mitarbeiter}
        onChange={() => {}}
        getOptionLabel={(option) => option.title}
        fullWidth
        PaperComponent={({ children }) => (
          <Paper style={{ background: "yellow" }}>{children}</Paper>
        )}
        style={{ width: 350 }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Mitarbeiter"
            variant="outlined"
            style={{ backgroundColor: "pink !important" }}
          />
        )}
        required
      />

I am passing {children} inside to make sure that list of options gets rendered there.

Here is a working example @ codesandbox https://codesandbox.io/s/wizardly-frost-9cj0v?file=/src/App.js

if you need to set additional styles you can add to style prop of <Paper> component.

ReactJS: Things to consider before using Closures in ReactJS

Labeeb Ahmad — Mon, 10 May 2021 10:43:39 +0000

Closures can 'break' reactivity if misused - Let's have a look.

In JS, closure is a function that "remembers" all variables from its parent scope.

For example, following closure will be executed after 1000ms. And it will have access to date variable that is not available inside the callback passed to setInterval. This is how a closure "remembers" variables from its parent scope.

var date = new Date();
setInterval(() => {
    console.log(date);
}, 1000);

But if this date variable is itself reactive & keeps on changing then closure will not be able to keep track of changing value of date variable.

I found out this behavior while I was developing a socket based chat app. Chat app mainly consists of functional components so I was registering socket io event listeners inside useEffect() as follows:

  const [time, setTime] = useState(new Date());
  useEffect(() => {
    socket.emit("new_message", function (newMessageData) {
      console.log("time", time);
    });
  }, []);

here time is a variable that is reactive and its value is changed every 900ms using following useEffect hook:

  useEffect(() => {
    /*** updates time every 1000ms ***/
    setInterval(() => {
      setTime(new Date());
    }, 1000);
  }, []);

After combining above code into a single component App.js, my code looks like this:

import "./styles.css";
import React, { useState, useEffect } from "react";
/***** 
following socket object is to mimic 
socket client for the sake of example 
***/
const socket = {
  on: function (type, cb) {
    setInterval(() => {
      cb();
    }, 1000);
  }
};
/****** ***/

export default function App() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    setInterval(() => {
      setTime(new Date());
    }, 1000);
  }, []);

  useEffect(() => {
    socket.on("new_message", function () {
      console.log("time", time);
    });
  }, []);
  return <div className="App">{time.toString()}</div>;
}

Problem is new_message, closure doesn't keep track of changes that are being made to time variable & this is because closure only remembers first value of time variable.

Have a look at this https://storyxpress.co/video/koigqbiphyw2b0v9b
value of time variable doesn't change in logs as this is coming from new_message handler through a closure.

However we can fix it like this:

import "./styles.css";
import React, { useState, useEffect } from "react";
const socket = {
  on: function (type, cb) {
    setInterval(() => {
      let newMessageData = new Date().getTime();
      cb(newMessageData);
    }, 1000);
  }
};
export default function App() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    setInterval(() => {
      setTime(new Date());
    }, 1000);
  }, []);

  const [newMessageData, setNewMessageData] = useState(new Date());
  useEffect(() => {
    socket.on("new_message", function (data) {
      setNewMessageData(data);
    });
  }, []);

  useEffect(() => {
    console.log("time.....", time);
  }, [newMessageData]);

  return <div className="App">{time.toString()}</div>;
}

Now instead of directly accessing time variable inside closure I am just setting value newMessageData using a hook.

Then I attached another useEffect() hooks that keeps track of changes to newMessageData and fetches an updated time variable whenever newMessageData changes.

Have a look at this screencast https://storyxpress.co/video/koigvz8sd5tdeeg0c : time variable is updated as it is logged to console every 1000ms.

Performant Pagination Technique for SQL databases

Labeeb Ahmad — Sun, 09 May 2021 17:10:37 +0000

In this article, I will go over a performant technique for paginating records.

The most common way of implementing pagination is by using offset based pagination. But this is not really performant technique when dealing with huge dataset.

Let's say we need to write a query to fetch latest posts for a social media website.

SQL query would look like this:

SELECT * FROM POSTS ORDER BY ID DESC OFFSET 0 LIMIT 10

Let's say you want to select next page for page 2 you will change offset to 10 & for page 3 offset will be 20 as mentioned below:

SELECT * FROM POSTS ORDER BY ID DESC OFFSET 10 LIMIT 20

SELECT * FROM POSTS ORDER BY ID DESC OFFSET 20 LIMIT 30

This technique selects all the records then skips records. And for that reason it is not really a performant technique. Consider a scenario where you are skipping million rows in order to fetch the next 10 records.

But there is a way, we can improve on this:

SELECT * FROM WHERE POSTS ID < {MAX_POST_ID+1} ORDER BY ID DESC LIMIT 10

This query would only select all the records that need to be returned & hence this would be much faster. Also since ID is an index so search over it would be much faster.

For first page, data returned would look like this.

ID BODY

20 Post Body
19 Post Body
18 Post Body
17 Post Body
16 Post Body
15 Post Body
14 Post Body
13 Post Body
12 Post Body
11 Post Body

And to fetch next 10 records(and subsequent queries) you would pass 11 as post_id. So query would look like this:

SELECT * FROM POSTS WHERE ID < {POST_ID} ORDER BY ID DESC LIMIT 10

ID BODY

10 Post Body
09 Post Body
08 Post Body
07 Post Body
06 Post Body
05 Post Body
04 Post Body
03 Post Body
02 Post Body
01 Post Body

So basically to fetch next page all you have to do is to pass post_id of last record returned from previous query.

This kind of pagination is not length aware. Cause again if we go on to calculate length then it would slow down the API call & subsequently apps will take longer to load newsfeed.