DEV Community: subbiah chandru

Solution for problem with useState and eventHandlers

subbiah chandru — Sat, 21 May 2022 18:57:36 +0000

import { useEffect } from "react";
import { useRefState } from "utils";

export default function HomePage() {
  const [mouseDownCounter, setMouseDownCounter] = useRefState(0);

  useEffect(() => {
    window.addEventListener("mousedown", () => {
      setMouseDownCounter(mouseDownCounter + 1);
    });
  }, []);

  return <div>{mouseDownCounter}</div>;
}

With react functional programing we got a problem of accessing latest react state inside addEventListener. “mouseDownCounter“ value will always to 0 inside addEventListener callback function, this can be solved by creating a custom hook that uses ref to store the state. Solution below.

import { useEffect } from "react";
import { useRefState } from "utils";

export default function HomePage() {
  const [
    mouseDownCounter,
    setMouseDownCounter,
    getMouseDownCounter,
  ] = useRefState(0);

  useEffect(() => {
    window.addEventListener("mousedown", () => {
      setMouseDownCounter(getMouseDownCounter() + 1);
    });
  }, []);

  return <div>{mouseDownCounter}</div>;
}

useRefState is same as useState, but has third parameter that exposes the current value of the state. To expose the current state we use react ref. Code below.

/**
 * same as use state, but we get a third param to get current value. This will be useful while working with settimeout, eventHandlers, promises and axios api calls.
 */
export function useRefState<T>(
  defaultValue: T
): [T, (updatedValue: T) => void, () => T] {
  const ref = useRef(defaultValue);
  const [state, setState] = useState(defaultValue);

  function setStateFn(updatedValue: any) {
    ref.current = updatedValue;
    setState(updatedValue);
  }

  function getValueFn() {
    return ref.current;
  }

  return [state, setStateFn, getValueFn];
}

SCSS mixins for reusable media query and style scoping

subbiah chandru — Thu, 28 Apr 2022 03:13:38 +0000

Let’s start with a simple SCSS. In this I will be using BEM modal css naming. Reference (http://getbem.com/naming/)

.as-facts {
  &-header {
    align-items: center;
    display: flex;
    flex-direction: column;

    &-image {
      display: flex;
      height: 200px;
      width: 200px;
    }
  }
}

This SCSS would be converted to below CSS

.as-facts-header {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.as-facts-header-image {
  display: flex;
  height: 200px;
  width: 200px;
}

Now there comes a use case where you need to hide image for mobile and landscapePhone screens. Let’s use untilMediatype mixin

.as-facts {
  &-header {
    align-items: center;
    display: flex;
    flex-direction: column;

    &-image {
      display: flex;
      height: 200px;
      width: 200px;

      @include untilMediaType("landscapePhone") {
        display: none;
      }
    }
  }
}

This would be converted into

.as-facts-header {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.as-facts-header-image {
  display: flex;
  height: 200px;
  width: 200px;
}
@media only screen and (max-width: 576px) {
  .as-facts-header-image {
    display: none;
  }
}

Now .as-facts-header-image will be added to all the element that has the class “as-facts-header-image“. Lets say there is a use case where you need as-facts-header-image to be applied only to elements inside .as-facts. Let’s scope it, using scope mixin.

.as-facts {
  @include scope() {
    &-header {
      align-items: center;
      display: flex;
      flex-direction: column;

      &-image {
        display: flex;
        height: 200px;
        width: 200px;

        @include untilMediaType("landscapePhone") {
          display: none;
        }
      }
    }
  }
}

This would be rendered into

.as-facts .as-facts-header {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.as-facts .as-facts-header-image {
  display: flex;
  height: 200px;
  width: 200px;
}
@media only screen and (max-width: 576px) {
  .as-facts .as-facts-header-image {
    display: none;
  }
}

Now we don’t need to worry about styles getting applied to all components with this mixin @scope it will be scoped to .as-facts.

Now let’s see the reusable mixins.

@use 'sass:map';

$breakpoints: (
  "phone": 320px,
  "landscapePhone": 576px,
  "tablet": 768px,
  "desktop": 992px,
  "largeDesktop": 1200px,
  "xlDesktop": 1400px,
);

@mixin untilMediaType($type) {
  @media only screen and (max-width: map.get($breakpoints, $type)) {
    @content;
  }
}

@mixin scope() {
  & & {
    @content;
  }
}

Array.at()

subbiah chandru — Mon, 25 Apr 2022 19:07:15 +0000

The at() method takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.

EX:

To get last element in array we always do array\[array.length -1\] instead we could simple call array.at(-1)
array\[array.length -2\] → array.at(-2)

// Our array with items
const numbers = [1, 2, 3];

// Using length property
const lengthWay = numbers[numbers.length-2];
console.log(lengthWay); // Logs: 2

// Using at() method
const atWay = colors.at(-2);
console.log(atWay); // Logs: 2

Do not pollute your app root

subbiah chandru — Fri, 22 Apr 2022 18:05:25 +0000

eslint, prettier, webpack, etc,. pollutes the root of a project with lot's of config files

Instead of having them in app root, most libraries allow you to configured custom path for the files

Let's see how to use customize paths for eslint, prettier and webpack

I usually place all config files into config folder

To customize eslint and prettier path create .vscode/settings.json in root of your folder and copy below configs

// NOTE:(VSCODE) Availalbe vscode settings.json variables https://code.visualstudio.com/docs/editor/variables-reference.
{
  // NOTE:(VSCODE) On save eslint, prettier and all other configured extensions will be executed the saved file/files.
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.options": {
    // NOTE:(ESLINT) Adding path for eslint config files, we don't need this if config files are in root of the aplication.
    "overrideConfigFile": "./config/.eslintrc",
    // NOTE:(ESLINT) Adding path for eslint ignore files, we don't need this if config files are in root of the aplication.
    "ignorePath": "./config/.eslintignore"
  },
  // NOTE:(PRETTIER) Adding path for prettier config files, we don't need this if config files are in root of the aplication.
  "prettier.configPath": "./config/.prettierrc",
  // NOTE:(PRETTIER) Adding path for prettier ignore files, we don't need this if config files are in root of the aplication.
  "prettier.ignorePath": "./config/.prettierignore"
}

To use custom webpack path use —config

{
    "scripts": {
        "build:dev": "webpack --config config/webpack.config.js",
    }
}

Optionally control state from parent component in React

subbiah chandru — Thu, 21 Apr 2022 17:23:15 +0000

useFallbackState is almost same as useState, but it takes 3 props instead of 1.

1st prop is the same -> default value.

2nd prop is the state from the parent. It's optional if parent doesn't send a prop then local useState's value will be used.

3rd prop is the setState from the parent. This callback will be called every time state changes.

In above code state's have been managed inside component.

Lets say this component is used in 10 places and you get a scenario where you need to manage the state from parent in just 1 place.

Now instead of adding if…else… condition in 100s of places you could simple replace useState to useFallbackState. Please see the example below.