DEV Community: Przemek Wolnik

How to add Tailwind CSS to Vite?

Przemek Wolnik — Sun, 28 Feb 2021 19:09:40 +0000

Tailwind CSS is a utility-first CSS framework which can help you fall in love with CSS again.

Vite is a modern webpack (I know, I know... I did a little simplification here).

In this article I'm gonna show you how to make them work together in three easy steps.

1. Add Tailwind CSS config file

Add a tailwind.config.js file to the root of your project.

module.exports = {
  purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {},
  variants: {},
  plugins: [],
}

2. Add PostCSS config file

Add a postcss.config.js file to the root of your project.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3. Add required packages to your project

Add Tailwind CSS, PostCSS and Autoprefixer packages to your project's dev-depnendencies:

npm i tailwindcss postcss autoprefixer -D

That's all! You can enjoy using Vite with Tailwind CSS now!

How to execute a function only after the user stops typing?

Przemek Wolnik — Thu, 18 Jun 2020 22:51:12 +0000

I was implementing simple search functionality. I've added input field with onChange handler. But I wanted to perform actual search method some time after the user stops typing.

Looks like a perfect place to use debounce here, right?

I thought that I would just put debounced search function inside useEffect hook. I also had to make sure that debounced search function will stay the same between renders.

After playing for a while with useCallback hook (replaced later by useRef hook which is more appropriate for this job) I had a working solution.

But...

But on second though it turned out the simplest solution is to use good old friend setTimeout combined with clearTimeout.

So here it is:

import React, { useState, useEffect } from 'react';

export const App = () => {
  const [value, setValue] = useState("");

  const handleOnChange = (event) => {
    setValue(event.target.value);
  };

  useEffect(() => {
    const timeoutId = setTimeout(() => console.log(`I can see you're not typing. I can use "${value}" now!`), 1000);
    return () => clearTimeout(timeoutId);
  }, [value]);

  return(
    <>
      <h1>{value}</h1>
      <input onChange={handleOnChange} value={value} />
    </>
  );
};

PS I found a similar (the same?) solution with the journey explained in more details here: https://joaoforja.com/blog/5-steps-to-perform-a-search-when-user-stops-typing-using-react-+-hooks-in-a-controlled-component/ Enjoy!

Explain debugger steps like I'm five

Przemek Wolnik — Fri, 29 May 2020 00:44:00 +0000

Debugger steps explained

There are basically four steps we can take when debugging:

continue / resume

Resumes execution of the program till the very end (or the next breakpoint/debugger statement if there is any).

step over

If there is no function invocation in the current line the execution advances to the next line and pauses the program.
If there is a function invocation in the current line that function is executed. Then program goes to the next line and pause.

step into

If there is no function invocation in the current line the execution advances to the next line and pauses the program.
If there is a function invocation in the current line that function starts to execute. Then program advances to the first line inside that function and pause.

step out

Continues execution of the current function till the very end. Then steps out of that function and pauses the execution at the next line after the line where the function was called.

Let's look at the example code and try to use all of these steps along the way.

Example code

Below you can see a simple code we will use during our debugging session.

1 const getGreet = (name) => {
2    const greet = `Hello ${name}!`;
3    return greet;
4 }
5
6 const sayHello = (name) => {
7    debugger;
8    const greet = getGreet(name);
9    return greet;
10 };
11
12 const greeting = sayHello('Alice');
13 console.log(greeting);

Debugging session

We run our code.
At line 12 function sayHello is called.
The program stops at line 7 (debugger statement).

From there we can:

click continue to resume execution of the program till the very end (or the next breakpoint/debugger statement if there is any). Hello Alice! is printed in the console. Program ends.
click step over to advance to the next line (8) and pause the program.
click step into to advance to the next line (8) and pause the program.
click step out to continue execution of the current function (sayHello), step out of that function and pause the program at line 13 (the next line after the line where sayHello was called).

Let say we chose step over or step into and the execution advanced to the line 8. Notice that in this line getGreet function is called. From there we can:

click continue to resume execution of the program till the very end (or the next breakpoint/debugger statement if there is any). Hello Alice! is printed in the console. Program ends.
click step over to execute getGreet function, assign the returned value (Hello Alice!) to the greet variable and advance to the next line (9) and pause the program.
click step into to start executing getGreet function and pause the program at line 2. We're inside getGreet function now!
click step out to continue execution of the current function (sayHello), step out of that function and pause the program at line 13 (the next line after the line where sayHello was called).

Let say we chose step into and the execution advanced to the line 2. From there we can:

click continue to resume execution of the program till the very end (or the next breakpoint/debugger statement if there is any). Hello Alice! is printed in the console. Program ends.
click step over to advance to the next line (3) and pause the program.
click step into to advance to the next line (3) and pause the program.
click step out to continue execution of the current function (getGreet), step out of that function and pause the program at line 9 (the next line after the line where getGreet was called).

I hope you can see the pattern here.

How to use useReducer hook to mimic setState method?

Przemek Wolnik — Wed, 26 Jun 2019 20:56:59 +0000

When using class components you can use setState method to update only part of the state object. React will merge updated value with the previous value of the state object:

//Somewhere in CLASS COMPONENT

//set initial state:
state = {
  name: 'Bob',
  age: 25,
};

//update name value with setState method:
this.setState({ name: 'Alice' });

//updated state:
state = {
  name: 'Alice',
  age: 25,
};

Now let's try to do the same thing with useState hook and function component:

//Somewhere in FUNCTION COMPONENT

//set initial state:
const [state, setState] = useState({ name: 'Bob', age: 25 });

//update name value with setState updater function
setState({ name: 'Alice' });

//updated state:
state = {
  name: 'Alice',
};

As you can see we "lost" information about age. setState didn't just update name property. It returned new state object that was passed to it.

One way to solve this problem is to use setState with the callback function:

//Somewhere in FUNCTION COMPONENT

//set initial state:
const [state, setState] = useState({ name: 'Bob', age: 25 });

//update name value with setState and callback function
setState(prevState => ({ ...prevState, name: 'Alice' }));

//updated state:
state = {
  name: 'Alice',
  age: 25,
};

This works perfectly fine. But... if you want to use terse version of this.setState method in function component (or just have some fun) you can use useReducer hook to do it.

useReducer like setState method

First let's write some pseudo code:

//Somewhere in FUNCTION COMPONENT

const reducer = (prevState, updatedProperty) => ({
  ...prevState,
  ...updatedProperty,
});

const initState = {
  name: 'Bob',
  age: 25,
};

//initialize state with initState
const [state, setState] = useReducer(reducer, initState);

//update name value (like we do in class component!)
setState({ name: 'Alice' });

//updated state:
state = {
  name: 'Alice',
  age: 25,
};

This time it worked as expected. We've updated name value and didn't lose age property.

And now full working example:

import React, { useReducer, useEffect } from 'react';

const reducer = (prevState, updatedProperty) => ({
  ...prevState,
  ...updatedProperty,
});

const initState = {
  name: 'Bob',
  age: 25,
  isLoading: true,
};

function App() {
  const [state, setState] = useReducer(reducer, initState);

  const handleOnChange = (e) => setState({ [e.target.name]: e.target.value });

  useEffect(() => {
    setState({ isLoading: false });
  }, []);

  const { name, age, isLoading } = state;

  return(
    <>
      {isLoading ? 'Loading...' : (
        <>
          <input type="text" name="name" value={name} onChange={handleOnChange} />
          <input type="text" name="age" value={age} onChange={handleOnChange} />
        </>
      )}
    </>
  );
}

And now the most important question:

Do you have to use useReducer here?

No!

Can you?

Yes! If you like :)

This post has been inspired by Kent C. Dodds' course "Simplify React Apps with React Hooks".

Why copying can be tricky?

Przemek Wolnik — Tue, 28 May 2019 15:50:55 +0000

There is a moment in the life of every programmer that you have to go back to the basics. I had that moment two days ago, when I wanted to bring the difference between React.Component and React.PureComponent to mind. The result of this return is this short article.

Traps of copying in JavaScript

Copying objects in JavaScript can be surprising. Example? Here you are.

This is information about my car SuperCar:

const myCar = {
    make: "SuperCar",
    year: 2016,
    details: {
        color: "blue"
    }
};

You bought a new car (also SuperCar) and want to usemyCar as a template to save information about it. You know that simple assignment operator is not a good choice. That's why you use object spread operator and write:

const yourCar = {...myCar};

Then you complete the relevant data about your car:

yourCar.year = 2019;
yourCar.details.color = "red";

console.log(yourCar.make); // "SuperCar"
console.log(yourCar.year); // prints 2019
console.log(yourCar.details.color); // prints "red"

Everything seems to be working properly. Until I try to write data about my car:

console.log(myCar.make); // "SuperCar"
console.log(myCar.year); // prints 2016
console.log(myCar.details.color); // prints "red" ?! WRONG!!!

What happened? By creating yourCar we did shallow copy of myCar. Variables holding primitive values (eg. numbers, strings) were actually copied. However, for those storing complex data (objects), only references to the same objects were copied.

A detailed description of this mechanism you can find here.

Below I will present a visual cheat sheet of how this mechanism works in JavaScript. Whenever I have to re-think how it works, I will come back to this article. I hope you'll find it useful too.

Examples

All examples are based on the same task. I create the alice object. Then I create the bob object on the basis of alice. I use for this:

1 Assignment operator
2 Object.assign method (or object spread operator)
3 clone method from Ramda library

1. Assignment operator

Assignment operator creates reference to the same object:

You can play with code here:

2. Object.assign / Object spread operator

Object.assign creates shallow copy of the object:

3. Ramda clone

R.clone creates deep copy of the object:

Thanks for reading! If you liked this let me know! Leave a comment, give a ❤️ or share it!

Feel free to check my Twitter account with more content like this.

Gently introduction to React Hooks. Part 2

Przemek Wolnik — Sat, 25 May 2019 13:24:21 +0000

This is the second part of the series Gently introduction to React Hooks. I encourage you to read the first part if you haven't already done so:

Gently introduction to React Hooks. Part 1

Let's start exactly where we left. Our component works. The user can enter his name in the input field. Let's add new functionality to it!

We want the text in the input field (user name "Bob") to be automatically selected after the component is rendered. Thanks to this, the user will be able to easily and conveniently change the value of this field without the need to use the mouse.

Consider how to write such functionality?
First of all, our component (which contains the input field) must be actually rendered (painted in the browser). Then we need to have access directly from our code to the input element. Finally, we select the text in there (the initial value of userName).

Let's write some code

We'll start as before from the class component. Later, we will transform it into a functional component that will use React Hooks.

To access the rendered component (including our input field), we must use the componentDidMount lifecycle method.
In addition, in order to actually "catch" this input field, we must create a reference to it and store it in a variable. This will be provided by the createRef method.
Finally, having reference to the rendered input field, we will use the select method, which will select the text.

I marked new elements in the code:

import React from 'react';

class MyComponent extends React.Component {
    state = {
        userName: "Bob",
    }

    handleChangeUserName = (e) => {
        this.setState({ userName: e.target.value });
    };

    //create new reference
    inputRef = React.createRef();

    //use componentDidMount
    componentDidMount() {
        //using the reference to the input field we select the text in it
        this.inputRef.current.select();
    }

    render() {
        return(
            <div className="card">
                <h2>User name: <span>{this.state.userName}</span></h2>
                <input
                    //we set a reference to the input field
                    ref={this.inputRef}
                    type="text"
                    name="userName"
                    id="userName"
                    value={this.state.userName}
                    onChange={this.handleChangeUserName}
                />
            </div>
        );
    }
}

The class component works as expected.

It's time to rewrite it into a functional component. Let's start where we finished in the previous part.

Grab the final example of the functional component. Next copy the new elements from the class component. Dont' forget to remove references to this and add the missing const.

Our functional component at this stage should look like this:

import React, { useState } from 'react';

const MyComponent = () => {
    const [userName, setUserName] = useState("Bob");

    const handleUserNameChanged = (e) => {
        setUserName(e.target.value);
    }

    //const added
    const inputRef = React.createRef();

    componentDidMount() {
        //this. removed
        inputRef.current.select();
    }

    return (
        <>
            <h2>User name: {userName}</h2>
            <input
                //this. removed
                ref={inputRef}
                type="text"
                value={userName}
                onChange={handleUserNameChanged}
            />
        </>
    );
}

Our code is not working. There is a problem with componentDidMount. But before we fix that let's take a look at createRef.

In the function component, like in the class one, if you want to use the reference to the rendered element, you can use createRef. However, React provides us with a special hook when we want to use the reference. It's called useRef. Let's use it in our example.

//import useRef hook
import React, { useState, useRef } from 'react';

const MyComponent = () => {
    const [userName, setUserName] = useState("Bob");

    const handleUserNameChanged = (e) => {
        setUserName(e.target.value);
    }

    //switched to useRef
    const inputRef = useRef();

    componentDidMount() {
        inputRef.current.select();
    }

    return (
        <>
            <h2>User name: {userName}</h2>
            <input
                ref={inputRef}
                type="text"
                value={userName}
                onChange={handleUserNameChanged}
            />
        </>
    );
}

In our example, the use of useRef will have the same result as using createRef. These two methods, however, differ from each other. If you are interested in what the difference is, I recommend reading this.

Ok, but our example is still broken.

What about `componentDidMount`?

There is no componentDidMount method in function components. So how can we get to the already rendered component? We need to use another hook: useEffect.

useEffect hook

useEffect hook looks like this:

useEffect(() => {
    //effect's code goes here
});

useEffect is a function that takes a callback function as a parameter. The code inside this callback function (let's call it effect) will be executed after each rendering of our component. After each means also after the first one. And in our case that's what we need.

Let's import useEffect hook and replace componentDidMount:

//import useEffect
import React, { useState, useRef, useEffect } from 'react';

const MyComponent = () => {
    const [userName, setUserName] = useState("Bob");

    const handleChangeUserName = (e) => {
        setUserName(e.target.value);
    };

    const inputRef = useRef();

    //useEffect instead of componentDidMount
    useEffect(() => {
        inputRef.current.select();
    });

    return (
        <div className="card">
            <h2>User name: <span>{userName}</span></h2>
            <input
                ref={inputRef}
                type="text"
                name="userName"
                id="userName"
                value={userName}
                onChange={handleChangeUserName}
            />
        </div>
    );
};

Our component works. Well, almost. "Almost" because it selects the text in the input field right after the first rendering of the component, but it does so every time a new character is entered. This is not what we want!

As I wrote before, the function passed to useEffect is executed after each render. When user enters a new character in the input field, the new value of userName is saved to the state, which in turn causes next render of the component. Then function passed to useEffect is executed again and the text in the input field is selected. We have to fix it!

useEffect can accept an array as a second parameter. Elements of this array can be any number of variables. After each render, React checks whether one of these variables has changed. If so the effect runs.

useEffect(() => {
    //effect's code goes here
}, [/* list of dependencies */]);

Eg. if we want to depend our effect on userName changes we can write this:

useEffect(() => {
    console.log('User name has changed!');
}, [userName]);

We can read this as follows:

We want to use effect.
This effect is writing text to the console.
We want this effect to run after first render.
After every next render if userName is changed we want to run the effect again.

In our case, we want the effect (selecting text in the input field) to run once (just after the first render), and then remain insensitive to further changes in our component. Whatever changes in our component (eg the user enters a new name) the effect should not run anymore. So we want the dependency array to be empty. Let's write it!

useEffect(() => {
    //effect's code goes here
}, []); //empty array of dependencies

This code means that the effect will run once and only once (after the first render).

This is the equivalent of componentDidMount lifecycle method.

That's exactly what we missed. So let's fix our functional component:

import React, { useState, useRef, useEffect } from 'react';

const MyComponent = () => {
    const [userName, setUserName] = useState("Bob");

    const handleChangeUserName = (e) => {
        setUserName(e.target.value);
    };

    const inputRef = useRef();

    useEffect(() => {
        inputRef.current.select();
    }, []); // effect has no dependencies

    return (
        <div className="card">
            <h2>User name: <span>{userName}</span></h2>
            <input
                ref={inputRef}
                type="text"
                name="userName"
                id="userName"
                value={userName}
                onChange={handleChangeUserName}
            />
        </div>
    );
};

We have it! Our component works as we wished. We have rewritten a class component into a function component that works exactly the same. It uses state and life cycle method.

But I still do not understand these delights

I understand you perfectly. I had the same myself. What's all this fuss about React Hooks? Why learn a new syntax since the result is exactly the same as before?

However, if you stay with me in the next part of Gently intorduction to React Hooks you should have the first "Ok, that's cool" moment.

Thanks for reading! If you liked this let me know! Leave a comment, give a ❤️ or share it!

Feel free to check my Twitter account with more content like this.

Gently introduction to React Hooks. Part 1

Przemek Wolnik — Wed, 22 May 2019 17:54:19 +0000

In these series of articles I'm going to answer following questions:

What are React hooks?
Why there are React hooks?
How to use React hooks?

From now on I assume that:

You have no knowledge of React hooks.
You have at least basic knowledge of React (any tutorial longer than 5 mins will be enough).

My story

I've been working with React for over two years now. I must admit it's been very nice two years. So I was very sceptical when I heard about React hooks for the first time. "Why change something that is good and works?" When I saw first hooks examples my feeling "this is not a good direction" was even stronger. But hooks kept attacking me from every direction and more and more people seemed to be delighted with the new React addition. I decided to give them a try... and I joined a circle of delighted. But first things first.

What are React Hooks?

Hooks were introduced to React to replace class creation of components. Replace with what? Replace with function creation.

'Whoa!' one can shout. We could have created components with functions this whole time. What the whole fuss with hooks is about? Before I answer this question let us take two steps back.

How do we create components in React?

As a general rule there are two ways to crate components in React.

Using classes (class components).
Using functions (function components).

Function components seem to be much easier:

One doesn't have to "wrestle" with this keyword and remember to bind methods.
They are more readable and faster to write.
They are easier to test and reasoning about.

So let us ask a simple question...

Why there are two ways for creating components in React?

If function components are so "cool" why not using only them? Why would one use classes in the first place?

Class components have two important features not available for function components:

They can have state.
They give access to component's lifecycle methods.

What is state? It's the component's ability to "remember" any information about itself.

E.g. a button component can remember whether user clicked it or not. And depending on that render itself in green or red.

What are component's lifecycle methods? Component's lifecycle is a period starting with the first painting of a component in a browser (and even one moment before) up until removing it from there. Lifecycle methods let us execute any code in key moments of component's existance.

E.g. let’s say we'd like to know the height of the button. This information is available after the button is actually rendered in the browser.Thanks to componentDidMount we can have access to the button and get its height when it's rendered.

We couldn’t have used these features while using function components in the past. But since React 16.8 - thanks to introduction of React hooks - both state and lifecycle methods are available to function components!

Show me some code!

Let's begin our adventure with React hooks from writing a class component.

We have a simple component that renders input field. The user can enter their name and it'll be saved in component state and displayed above the input field.

import React from 'react';

class MyComponent extends React.Component {
    state = {
        userName: "Bob",
    }

    handleUserNameChanged = (e) => {
        this.setState({ userName: e.target.value });
    }

    render() {
        return(
            <>
                <h2>User name: {this.state.userName}</h2>
                <input
                    type="text"
                    value={this.state.userName}
                    onChange={this.handleUserNameChanged}
                />
            </>
        );
    }
}

Let's write a function component now. The goal is to write a component that has exactly the same functionality as the class component. Let's start with an empty arrow function:

import React from 'react';

const MyComponent = () => {
    // code goes here
};

And then do the following:

Copy the code returned by render method. It'll be returned directly by our function component.
Copy handleUserNameChanged method and add const keyword in front of it.
We don't have this keyword in function component. Delete all its occurrences.
We are interested in userName not state.userName. Remove all state. from the code.
We don't define state as an object. We define userName variable instead and give it a string "Bob" as initial value.
Change setState with a more descriptive function: setUserName. We pass it a value we get from input field. This function will be responsible for changing the value we keep in the userName variable.

Our function component should look as follows:

import React from 'react';

const MyComponent = () => {
    const userName = "Bob";

    const handleUserNameChanged = (e) => {
        setUserName(e.target.value);
    }

    return(
        <>
            <h2>User name: {userName}</h2>
            <input
                type="text"
                value={userName}
                onChange={handleUserNameChanged}
            />
        </>
    );
}

At this stage our component is not working. We get information about an error: setUserName is not defined. Let's remind ourselves what setUserName should be? It should be a function that changes the value of the userName.

We're going to write a naive implementation of that function. This function will accept a new userName value and (for now) it'll return current userName value.

const setUserName = (newUserName) => userName;

Now add it to our function component (in line 4):

import React from 'react';

const MyComponent = () => {
    const userName = "Bob", setUserName = (value) => userName;

    const handleUserNameChanged = (e) => {
        setUserName(e.target.value);
    }

    return(
        <>
            <h2>User name: {userName}</h2>
            <input
                type="text"
                value={userName}
                onChange={handleUserNameChanged}
            />
        </>
    );
}

Our code almost works. Almost because it shows input field and user name as "Bob". But we can't change that user name. Why? We are lacking the component’s state in which we could keep our new user name. We'd like to use state here. Luckily for us React gives us a useState hook.

useState hook

useState is a hook that let us use state in a function component.

useState hook is a function that returns array with two elements:

First element is a variable to store a value of our state.
Second element is a function we can use to change the state with a new value.

We can pass useState an argument with initial state value. It can be any string, number, boolean, array or object. In our example we pass string "Bob".

We can write:

const state = useState("Bob"); // state is an array
const userName = state[0]; // first element is a state's value
const setUserName = state[1]; // second element is a function

Thanks to array destructuring we can write it more elegant:

const [userName, setUserName] = useState("Bob");

We can read this as follows:

We want to use state and keep its value in a variable called userName.
We can change the state by calling setUserName function with a new value.
We set initial userName value to "Bob".

With this knowledge at hand let's get back to our example. Import useState from React and use it in the component.

import React, { useState } from 'react'; // import useState hook

const MyComponent = () => {
    const [userName, setUserName] = useState("Bob");

    const handleUserNameChanged = (e) => {
        setUserName(e.target.value);
    }

    return(
        <>
            <h2>User name: {userName}</h2>
            <input
                type="text"
                value={userName}
                onChange={handleUserNameChanged}
            />
        </>
    );
}

Now our function component should work exactly the same as our class component. Thanks to React’s useState hook we've created a function component that can have state!

Great, it's working but where are those miracles?

You may be thinking that adding Hooks to React doesn't bring any spectacular benefits to the table. And actually you're right. If you compare initial class component with its function counterpart there are not too many differences. It's really hard to understand why so many people is so excited about hooks.

I promise you one thing. If you stay with me to the end of this series you'll have a Wow! This is so super! moment. At least I had one.

See you in the next part of the Gentle Introduction to React Hooks!

Thanks for reading! If you liked this let me know! Leave a comment, give a ❤️ or share it!

Feel free to check my Twitter account with more content like this.

DEV Community: Przemek Wolnik

How to add Tailwind CSS to Vite?

1. Add Tailwind CSS config file

2. Add PostCSS config file

3. Add required packages to your project

How to execute a function only after the user stops typing?

Explain debugger steps like I'm five

Debugger steps explained

continue / resume

step over

step into

step out

Example code

Debugging session

How to use useReducer hook to mimic setState method?

useReducer like setState method

Why copying can be tricky?

Traps of copying in JavaScript

Examples

1. Assignment operator

2. Object.assign / Object spread operator

3. Ramda clone

Gently introduction to React Hooks. Part 2

Let's write some code

What about componentDidMount?

useEffect hook

But I still do not understand these delights

Gently introduction to React Hooks. Part 1

My story

What are React Hooks?

How do we create components in React?

Why there are two ways for creating components in React?

Show me some code!

useState hook

Great, it's working but where are those miracles?

What about `componentDidMount`?