Forem: Danial Dezfouli

React.js + Typescript Clean Architecture

Danial Dezfouli — Thu, 09 Mar 2023 10:56:53 +0000

writing clean code and having a clean architecture is always critical and mostly a challenge for junior developers.

I started a repo to address some important stuff that a clean react.js codebase needs to have.

feel free to contribute and improve it or ask for something in the issues:

https://github.com/danialdezfouli/react-typescript-clean-architecture

My New Spacecraft Browser Game with Vanilla JS

Danial Dezfouli — Wed, 02 Feb 2022 22:07:17 +0000

I enjoy creating mini-games or implementing interaction designs on the web.

And here is the browser game I've made recently!

Source Code:

https://github.com/danialdezfouli/spacecraft-game

Online Demo:

https://spacecraft.vercel.app/

Feel free to ask questions or share your thoughts with me :)

Finding Words in .srt Subtitle file

Danial Dezfouli — Thu, 05 Aug 2021 21:31:53 +0000

I have created my first project with Go!

With this tool you can easily have English words and their frequency in the subtitle files you have.

What is the Point?

It would be a useful tool for non-native English speakers to learn the words which used in their TV-Series and Movies.

https://github.com/danialdezfouli/subtitle-to-words

💡 React Hooks: async function in the useEffect

Danial Dezfouli — Fri, 04 Jun 2021 17:58:09 +0000

When you're new to React Hooks, you may notice that you get warnings and bugs if you use an async function inside the useEffect Hook. Let's find out why this happens.

There are dozens of articles and issues about how to use async in the React Hooks:

Why is this happening?

Async functions always return a promise so you will not have the actual value until the Promise is fulfilled.

Anti-Pattern: async function directly in the useEffect

React can run this async function but can not run the cleanup function.
Don't use raw async function directly in the useEffect.

useEffect(async () => {
  console.log('Hi :)')

  return () => {
    console.info('Bye!') // It won't run
  };
}, []);

Code example: using unmount in async functions.

You don't have to unmount callback unless you use await expression before it.

unmount = await (async () => {
  console.log('Hi :)')

  return () => {
    console.info('Bye!')
  };
})()
unmount()
// Hi :)
// Bye!

Code example: using unmount in a function.

unmount = (() => {
  console.log('Hi :)')

  return () => {
    console.info('Bye!') // 👍 
  };
})()
unmount()
// Hi :)
// Bye!

Code example: using async function in the useEffect.

You can create an async function in the useEffect callback, as Nick mentioned in his article.

  useEffect(() => {
    (async () => {
      const products = await api.index()
      setFilteredProducts(products)
      setProducts(products)
    })()

    return () => {
      unsubscribeOrRemoveEventHandler() // 👍 
    }
  }, [])

I hope you find this article useful.