Why I prefer tailwindcss over styled-components?

Tony Khaov — Tue, 25 Jan 2022 19:36:48 +0000

On the left with styled-components and on the right the same code using tailwindcss.

These are the reasons why I believe using tailwindcss is better than using styled-components:

I don't need to name things especially classnames (.welcome .mention) and components (DivStyled) every time I want to add styles.
I don't need to search for the styles. It is colocated to the HTML/JSX so I can the see that the div has a border black of 1px, it's explicit. And if there are too many utility classes, I can just store them in a variable.
I don't need to maintain CSS declarations. If I remove the element with the classname .mention, I will have not forget to remove the styles I declared in DivStyled. Here .mention styles are declared below but what if it is declared in the parent element that is in another file?
I don't need to create a design system, tailwindcss has amazing default settings (spacings, colors, etc.). If I have to use my own custom design system, I'll just have to declare it in tailwind.config.js and I'll use as if it's normal (check out this video: https://youtu.be/cZc4Jn5nK3k)
It urges me to use coherent spacings. I won't do any pixel perfect integration because I'll have to use text-lg (18px), text-xl (20px), etc. And if I ever need to be precise then I'll use arbitrary styles

But what is useCallback? And when should I use it?

Tony Khaov — Fri, 10 Dec 2021 14:14:26 +0000

useCallback is a native hook in React used for memoizing functions. But you'll never use it unless you run into performance issues (usually when your function is inside a dependency array).

When you create a component, every declaration above the return will be redeclared on rerenders. Which means that they will have a whole new different "id". Unless they are useMemoed or useCallbacked.
useMemo is for primitive types and objects.
useCallback is for functions.

The example is contrived but you'll get the idea. Let's say the following component:

function App() {
  const [count, setCount] = useState(0)

    useEffect(() => {
        console.log('count has been updated', count)
    }, [count])

  return <button onClick={() => setCount(c => c + 1)}>Increment {count}</button>
}

Every time we click on the button, the state count: number updates and triggers a rerender of <App/>

and useEffect callback is executed because count: number from the dependencies array will be different.

Now let's modify the useEffect to call some API to get users. The function is declared inside <App/> and so every time <App/> rerenders, getUsers is redeclared, it will have a whole new "id" and thus the callback inside useEffect will be called.

function App() {
  const [count, setCount] = useState(0)

    const getUsers = () => fetch('someEndpoint')

    useEffect(() => {
        console.log('getUsers function has been changed')
        getUsers()
    }, [getUsers])

  return <button onClick={() => setCount(c => c + 1)}>Increment {count}</button>
}

You can have a look at the consequences: getUsers is called on every rerenders.
https://www.youtube.com/watch?v=yAqezVTJcoo

and here comes useCallback. useCallback is useful in this kind of situation because it allows us to memoize getUsers() : meaning that getUsers will be redeclared only if a variable inside the dependencies array of the useCallback changes. He nothing is specified, getUsers will never be redeclared (only on new mounts though).

function App() {
  const [count, setCount] = useState(0)

    const getUsers = useCallback(() => fetch('someEndpoint'), [])

    useEffect(() => {
        console.log('getUsers function has been changed')
        getUsers()
    }, [getUsers])

  return <button onClick={() => setCount(c => c + 1)}>Increment {count}</button>
}

Here the component rerenders but getUsers won't be called!
https://www.youtube.com/watch?v=xSgKRzl1pqM

However using useCallback comes with a cost. The function will be stored in memory so prefer using native JS strategies.

One way is to declare getUsers() outside of the component and so it will only be declared once.

const getUsers = () => fetch('someEndpoint')

function App() {
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    console.log('getUsers function has been changed')
    getUsers()
  }, [getUsers])

  return (
    <button onClick={() => setCount((c) => c + 1)}>Increment {count}</button>
  )
}

Or simply not declare a function and call fetch directly because fetch is a native function, it will never be changed

function App() {
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    console.log('call endpoint')
    fetch('someEndpoint')
  }, [fetch])

  return (
    <button onClick={() => setCount((c) => c + 1)}>Increment {count}</button>
  )
}

Another reason for using useCallback is closure. Sometimes you want to access a variable from a certain lexical scope, so you can't declare your function somewhere else and pass 10 arguments... (in progress)

DEV Community: Tony Khaov

Why I prefer tailwindcss over styled-components?

But what is useCallback? And when should I use it?