DEV Community: kheersagar parja

Tailwind + React Native

kheersagar parja — Wed, 28 Dec 2022 16:35:29 +0000

1. Create the project

Create the project with the Expo CLI

npx create-expo-app my-app

cd my-app

Install tailwind and its dependency

yarn add nativewind
yarn add --dev tailwindcss

2. Setup Tailwind CSS

Run npx tailwindcss init to create a tailwind.config.js file

Add the paths to all of your component files in your tailwind.config.js file. Remember to replace with the actual name of your directory e.g. screens.

// tailwind.config.js

module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Add the Babel plugin

Modify your babel.config.js

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
+   plugins: ["nativewind/babel"],
  };
};

Code

import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
   <View className="flex-1 items-center justify-center bg-white">
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

Update State After API Response React!!!

kheersagar parja — Thu, 24 Nov 2022 12:01:11 +0000

Have you ever wounder why immediately after updating the state if it is logged, value is undefined??

  const fetchAPI = async () => {
    const res = await axios.get("https://catfact.ninja/fact");
    setData((previousData) => ({ ...previousData, ...res.data }));
    console.log("response from API: \n" + res.data.fact);
    console.log("State Data: \n" + data.fact);
  };

Console


response from API: 
The smallest wildcat today is the Black-footed cat. The females are less than 20 inches (50 cm) long and can weigh as little as 2.5 lbs (1.2 kg). 

State Data: 
undefined

Whole Code

import axios from "axios";
import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [data, setData] = useState({});
  const [count, setCount] = useState(0);
  const fetchAPI = async () => {
    const res = await axios.get("https://catfact.ninja/fact");
    setData((previousData) => ({ ...previousData, ...res.data }));
    console.log("response from API: \n" + res.data.fact);
    console.log("State Data: \n" + data.fact);
    if (data.fact) {
      setCount(data.fact.length);
    }
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <h1>Fact:</h1>
        <h2>{data.fact}</h2>
        <h2>charact count : {count}</h2>
      </div>
      <button onClick={fetchAPI}>fetch API</button>
    </div>
  );
}

Refer video below:

On clicking Fetch Api Button
State is not updated immediately and if following code is dependent, then it does work.

Its because how react updates the state and re-renders
React update state in batches, means It will register the update state function in a queue and after running all the code it executes the state queue and re-renders.
That's why if we log just after setData() function we get undefined but if we click on fetch api button again we get previous value.

For more information how react updates state [click here]

How to fix this and execute code as soon as state is updated?

Fix: UseEffect
It takes a callback function and a dependency array, this can be used to fix the problem of running dependent code after state is updated

  useEffect(() => {
    console.log("updated DATA \n" + data.fact);
    setCount(0); // to eleminate race condition
    if (data.fact) {
      setCount(data.fact.length);
    }
  }, [data]);

Whole Code

import axios from "axios";
import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [data, setData] = useState({});
  const [count, setCount] = useState(0);
  const fetchAPI = async () => {
    const res = await axios.get("https://catfact.ninja/fact");
    setData((previousData) => ({ ...previousData, ...res.data }));
    console.log("response from API: \n" + res.data.fact);
  };
  useEffect(() => {
    console.log("updated DATA \n" + data.fact);
    if (data.fact) {
      setCount(data.fact.length);
    }
  }, [data]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <h1>Fact:</h1>
        <h2>{data.fact}</h2>
        <h2>charact count : {count}</h2>
      </div>
      <button onClick={fetchAPI}>fetch API</button>
    </div>
  );
}

Regular Function VS Fat Arrow Function

kheersagar parja — Wed, 23 Nov 2022 06:29:01 +0000

Regular function

function ATraditionalFunc () {
  console.log("inside traditonal function")
}
ATraditionalFunc()

Output

inside traditonal function

Arrow Function or Fat Arrow function

const AFatArrowFunc = () =>{
  console.log("inside fatArrowFunc function")
}
AFatArrowFunc()

Output

inside fatArrowFunc function

Both behaved the same then what is the difference??

If we call both functions before its initialization what will happen?

ATraditionalFunc()
AFatArrowFunc()
function ATraditionalFunc () {
  console.log("inside traditonal function")
}
const AFatArrowFunc = () =>{
  console.log("inside fatArrowFunc function")
}

Output

We got a Reference Error, why did it happened?
There are two reasons :

Hoisting

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.
for more information: [click here]

When Execution is in Line no. 1
Regular function in allocated memory in Global scope whereas Fat Arrow function in allocation in Script scope. Therefore when we try to access a function before its Initialization it gives us reference error.

If hoisting is the only reason then, what happens if we do this ?

ATraditionalFunc()
AvarfatArrowFunc() 
function ATraditionalFunc () {
  console.log("inside traditonal function")
}

var AvarfatArrowFunc = () =>{
  console.log("inside varfatArrowFunc function")
}

Output

we changed const to var and output is still the same.
Here comes how JavaScript treats variables and functions.

Value initialization

when JavaScript allocates memory it assign undefined to Fat Arrow function because JS treats it as a variable and whole function to Regular function, refer above image.

Block scope Vs Global scope var, let, const !!!

kheersagar parja — Tue, 22 Nov 2022 08:51:46 +0000

const a = 1;
let b = 2;
var c = 3;

if(true){
  const a = 10
  let b = 20
  var c  = 30
  console.log('Inside Block value of a = ' ,a ) 
  console.log('Inside Block value of b = ' ,b ) 
  console.log('Inside block value of c = ' ,c ) 
}
console.log('Outside Block value of a = ' ,a ) 
console.log('Outside Block value of b = ' ,b ) 
console.log('Outside block value of c = ' ,c )

Output

Inside Block value of a =  10
Inside Block value of b =  20
Inside block value of c =  30
Outside Block value of a =  1
Outside Block value of b =  2
Outside block value of c =  30

Why did value of a and b are unchanged outside the block??

The answer is let and const are block scope.

When Execution is in Line no. 1

var c is allocated memory in Global Scope whereas a and b are allocated memory in different scope.

When Execution reached to Line no.6

Values of variables are assigned but, a new scope can been seen, Block Scope where again a and b are allocated memory.

When Execution reached to line no. 9

Variables values are assigned in block scope and we can notice Script scoped a and b is not changed but global scoped variable c is changed to 30.

When Execution reached to Line no. 13 outside if block

Work of block scope is done and variable a and b values remains unchanged whereas value of c is changed.

Asynchronous to Synchronous JavaScript

kheersagar parja — Tue, 22 Nov 2022 07:19:27 +0000

Output

Before setTimeout
After setTimeout
Inside setTimeout

Convert Asynchronous setTimeout Function to Synchronous

console.log("Before setTimeout")

//await will wait for JS to resolve the promise
await new Promise((resolve,reject)=>{
   setTimeout(()=>{
   //after 1000ms promise will be resolved
    resolve(console.log("Inside setTimeout")) 
   },1000) 
})

console.log("After setTimeout")

Output

Before setTimeout
Inside setTimeout
After setTimeout

Plotting 100k+ records in JavaScript

kheersagar parja — Mon, 21 Nov 2022 06:22:36 +0000

Unlike matplot library in python where you can easily plot records of 100k+

Many JavaScript Library Fails to do the same

Popular JS Library

They are good and easy to use but when it comes to plotting data over 30k+ or 50k+ they suffer performance issue and can even crash.

Both have configuration to speedup the performance and plot larger dataset but they still suffer.

Apache ECharts

JavaScript library can easily plot data over 100k+

Reference Link: Apache ECharts

Examples

Reference Link: link

DEV Community: kheersagar parja

Tailwind + React Native

1. Create the project

2. Setup Tailwind CSS

3. Add the Babel plugin

Code

Update State After API Response React!!!

Have you ever wounder why immediately after updating the state if it is logged, value is undefined??

Console

Whole Code

How to fix this and execute code as soon as state is updated?

Whole Code

Regular Function VS Fat Arrow Function

Regular function

Output

Arrow Function or Fat Arrow function

Output

If we call both functions before its initialization what will happen?

Output

Hoisting

Output

Value initialization

Block scope Vs Global scope var, let, const !!!

Why did value of a and b are unchanged outside the block??

Asynchronous to Synchronous JavaScript

Popular JavaScript Interview Question

Output

Output

Plotting 100k+ records in JavaScript

Popular JS Library

Apache ECharts

Examples