DEV Community: Clément Creusat

Let's talk React - How to use a Custom Hook multiple times

Clément Creusat — Fri, 20 May 2022 13:43:55 +0000

Making a custom hook real quick..

Example with a useCounter hook where we extract the logic to reuse it.

a state equal to the argument score or 0 if we do not pass one.
a method to increment number: +1
a method to decrement number: -1
returning count state and our two methods has an object.

export const useCounter = (score: number) => {
  const [count, setCount] = useState(score || 0);
  const increment = useCallback(() => setCount(count + 1), [count]);
  const decrement = useCallback(() => setCount(count - 1), [count]);
  return { count, increment, decrement };
};

Using your useCounter hook

with a variable

In React's documentation, you will read the approach to call your custom hook.

Storing the useCounter hook inside a variable using const.

const counter = useCounter(0);

So inside your component:

const counter = useCounter(0);
// Display your dynamic attribute starting from 0.
<p> {counter} </p>
// Using useCounter methods to add or remove 1
<button onClick={counter.increment}>Increment</button>
<button onClick={counter.decrement}>Decrement</button>

with destructuring

Remember that we returned an object ?

{ count, increment, decrement }

So inside your component:

const { count, increment, decrement } = useCounter(0);
// Display your dynamic attribute starting from 0.
<p> {count} </p>
// Using useCounter methods to add or remove 1
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>

This is great. Now, we know how to use the custom hook we created but this is not helpful to use it a bunch of times if needed...

How to use your useCounter hook multiple times?

Let's see the part to use your useCounter hook multiple times in the same component.

with multiple variables

So to use it more than once inside a component, you will do this :

const counter = useCounter(0);
const secondCounter = useCounter(0);

<p>{counter}</p>
<p>{secondCounter}</p>

Every counter has his own local state and will not interfere with the others.

with destructuring

We just saw that we can destructure an object and we know something else : it is possible to rename our properties / variables when destructuring.

const { count: firstCount, increment: firstIncrement, decrement: firstDecrement, } = useCounter(0);
const { count: secondCount, increment: secondIncrement, decrement: secondDecrement } = useCounter(0);

<p>{firstCount}</p>
<p>{secondCount}</p>

Same as above, every counter has his own local state and will not interfere with the others.

You can check a live example right there : StackBlitz Example

What if returning an Array inside your custom hook?

When creating the custom hook, we return count, increment and decrement as an object.

Let see how to use it if returning an array:

[ count, increment, decrement ]

One time in a component

Calling it only once inside a component would be:

const [count, increment, decrement] = useCounter(0);

<p> {count} </p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>

Multiple times

We also use destructuring with array an directly renaming each one.


const [counter, incrementCounter, decrementCounter] = useCounter(0);
  const [secondCounter, secondIncrementCounter, secondDecrementCounter] =
    useCounter(0);

<p> {counter} </p>
<button onClick={incrementCounter}>Increment</button>
<button onClick={decrementCounter}>Decrement</button>

<p> {secondCounter} </p>
<button onClick={secondIncrementCounter}>Increment</button>
<button onClick={secondDecrementCounter}>Decrement</button>

You can check a live example right there : StackBlitz Example

Hope this article will help and Let's Talk React soon!

React, Vue and Svelte: Comparing Multi Select Binding

Clément Creusat — Thu, 12 May 2022 07:35:02 +0000

Multi Select Binding in...

Woo ! This is it. The end of this series. We've seen a lot of concepts to compare between these frameworks. Hope it helped people!

Check it out 🚀

React

Live Example

const [multiSelected, setMultiSelected] = useState<string[]>([
    'Frontend Developer',
]);
const handleMultiSelected = (options: any) => {
let selectedOptions = [...options]
    .map((option) => option.value)
    .reduce((prev, current) => [prev, ', ', current]);

setMultiSelected(selectedOptions);
};

<section>
    <h2>Multi Select</h2>
    <select multiple style={{ width: '100px' }} onChange={(e)=> handleMultiSelected(e.target.selectedOptions)}
        >
        <option>Frontend Developer</option>
        <option>Backend Developer</option>
        <option>Fullstack Developer</option>
    </select>
    <p>Selected: {multiSelected}</p>
</section>

Vue

Live Example

const multiSelected = ref(['Frontend']);

<section>
    <h2>Multi Select</h2>
    <select v-model="multiSelected" multiple style="width: 100px">
        <option>Frontend Developer</option>
        <option>Backend Developer</option>
        <option>Fullstack Developer</option>
    </select>
    <p>Selected: {{ multiSelected }}</p>
</section>

Svelte

Live Example

let multiSelected: string[] = ['Frontend Developer'];

<section>
    <h2>Multi Select</h2>
    <select bind:value={multiSelected} multiple style="width: 100px">
        <option>Frontend Developer</option>
        <option>Backend Developer</option>
        <option>Fullstack Developer</option>
    </select>
    <p>Selected: {multiSelected}</p>
</section>

React, Vue and Svelte : Comparing Select Binding

Clément Creusat — Fri, 29 Apr 2022 11:35:13 +0000

Select Binding in...

You will notice that without any extra code, React will select the next value because the first one is disabled. Vue and Svelte leave the select empty.

Check it out 🚀

React

Live Example

const [selected, setSelected] = useState<string>('Choose one option');

<section>
    <h2>Select</h2>
    <select onChange={(e) => setSelected(e.target.value)}>
        <option value="" disabled>
        Please select one
        </option>
        <option>Frontend Developer</option>
        <option>Backend Developer</option>
        <option>Fullstack Developer</option>
    </select>
    <p>Selected: {selected}</p>
</section>

Vue

Live Example

const selected = ref('Choose one option');

<section>
    <h2>Select</h2>
    <select v-model="selected">
      <option value="" disabled>Please select one</option>
      <option>Frontend Developer</option>
      <option>Backend Developer</option>
      <option>Fullstack Developer</option>
    </select>
    <p>Selected: {{ selected }}</p>
</section>

Svelte

Live Example

let selected: string = 'Choose one option';

<section>
    <h2>Select</h2>
    <select bind:value={selected}>
      <option disabled value="">Please select one</option>
      <option>Frontend Developer</option>
      <option>Backend Developer</option>
      <option>Fullstack Developer</option>
    </select>
    <p>Selected: {selected}</p>
</section>

React, Vue and Svelte: Comparing Radio Binding

Clément Creusat — Wed, 20 Apr 2022 08:12:32 +0000

Input Radio Binding in...

Easy peasy ! Radio binding in any framework is really easy. Vue and Svelte continue with their magic :)

Check it out 🚀

React

Live Example

const [picked, setPicked] = useState<string>('React');

  const handleChange = ({
    target: { value },
  }: React.ChangeEvent<HTMLInputElement>) => {
    setPicked(value);
  };

<section>
 <h2>Radio</h2>
  <input
    type="radio"
    id="react"
    value="React"
    name="picked"
    defaultChecked={true}
    onChange={handleChange}
  />
  <label htmlFor="react">React</label>
  <br />
  <input
    type="radio"
    id="vue"
    value="Vue"
    name="picked"
    onChange={handleChange}
  />
  <label htmlFor="vue">Vue</label>
  <br />
  <span>Picked: {picked}</span>
</section>

Vue

Live Example

const picked = ref('react');

<section>
  <h2>Radio</h2>
  <input
    type="radio"
    id="react"
    value="react"
    v-model="picked"
    checked="true"
  />
  <label for="react">React</label>
  <br />
  <input
    type="radio"
    id="vue"
    value="vue"
    v-model="picked"
  />
  <label for="vue">Vue</label>
  <br />
  <span>Picked: {{ picked }}</span>
</section>

Svelte

Live Example

let frameworks: string = 'React';

<section>
    <h2>Radio</h2>
    <input
      type="radio"
      bind:group={frameworks}
      id="react"
      value={'React'}
    />
    <label for="react">React</label>
    <br />
    <input
      type="radio"
      bind:group={frameworks}
      id="vue"
      value={'Vue'}
    />
    <label for="vue">Vue</label>
    <br/>
    <span>Picked: {frameworks}</span>
</section>

React, Vue and Svelte : Comparing Multi Checkbox Binding

Clément Creusat — Wed, 13 Apr 2022 08:18:23 +0000

Multi Checkbox Binding in...

Handling multi checkbox binding is not React's finest job... React needs so much more code than Vue or Svelte. I based this comparison with Vue example and I tried to keep the same "basis". See how simple it is in Vue or Svelte?

Check it out 🚀

React

Live Example

const [checkedJobs, setCheckedJobs] = useState<string[]>(['Frontend']);
const handleMultiCheckbox = ({
    target: { value },
  }: React.ChangeEvent<HTMLInputElement>) => {
    let checked = [...checkedJobs];
    let findIndex = checked.findIndex(
      (item: string): boolean => item === value
    );

    if (!checkedJobs.includes(value)) {
      checked = [...checkedJobs, value];
    } else {
      checked = checkedJobs.filter(
        (item: string, index: number) => index !== findIndex
      );
    }

    setCheckedJobs(checked);
};

<section>
  <h2>Multi Checkbox</h2>
  <input
    type="checkbox"
    id="frontend"
    value="Frontend"
    onChange={handleMultiCheckbox}
  />
  <label htmlFor="frontend">Frontend Developer</label>
  <input
    type="checkbox"
    id="backend"
    value="Backend"
    onChange={handleMultiCheckbox}
  />
  <label htmlFor="backend">Backend Developer</label>
  <input
    type="checkbox"
    id="fullstack"
    value="Fullstack"
    onChange={handleMultiCheckbox}
  />
  <label htmlFor="fullstack">Fullstack Developer</label>
  <p>Checked jobs: {checkedJobs.map((item: string) => item).join(', ')}</p>
</section>

Vue

Live Example

const checkedJobs = ref(['Frontend']);

<section>
  <h2>Multi Checkbox</h2>
  <input
    type="checkbox"
    id="frontend"
    value="Frontend"
    v-model="checkedJobs"
  />
  <label for="frontend">Frontend Developer</label>
  <input
    type="checkbox"
    id="backend"
    value="Backend"
    v-model="checkedJobs"
  />
  <label for="backend">Backend Developer</label>
  <input
    type="checkbox"
    id="fullstack"
    value="Fullstack"
    v-model="checkedJobs"
  />
  <label for="fullstack">Fullstack Developer</label>
  <p>Checked jobs: {{ checkedJobs }}</p>
</section>

Svelte

Live Example

let checkedJobs: string[] = ['Frontend Developer'];

  <section>
    <h2>Multi Checkbox</h2>
    <input
      type="checkbox"
      id="frontend"
      value="Frontend"
      bind:group={checkedJobs}
    />
    <label for="frontend">Frontend Developer</label>
    <input
      type="checkbox"
      id="backend"
      value="Backend" 
      bind:group={checkedJobs}
    />
    <label for="backend">Backend Developer</label>
    <input
      type="checkbox"
      id="fullstack"
      value="Fullstack"
      bind:group={checkedJobs}
    />
    <label for="fullstack">Fullstack Developer</label>
    <p>Checked jobs: {checkedJobs}</p>
</section>

CSS Variables: Quick guide

Clément Creusat — Sat, 09 Apr 2022 15:17:29 +0000

Even though CSS Variables aka Custom Properties have been more than usable for 3-4 years now, not everyone knows about them or uses them.

They are a great addition to CSS. One of the best since CSS 3. A lot of new features are coming and are announcing a great time for CSS again!

I will write a short series about them and we will go deeper into their use.

How do they work?

Looking at this picture, you will notice 3 things:

Top level / Root level

CSS Variables are declared at root level. It's not an obligation and we are going to explore it but it became the standard approach.

:root {
 --main-bg-color: grey;
 --font-family: 'Overpass', sans-serif;
 --font-medium: 16px;
}

How to declare and use them

We declare them with double hyphen -- and a name as we would do in a SASS variable :
--main-bg-color vs $main-bg-color

You add a value to them. Could be font-family, font-size, spacings, url images, ...

--name: value;

The use of the `var()` function

To read them, we will use the var() function and add two things:

The first one is the variable itself

var(--main-bg-color)

The second one is a default value if the variable is not defined:

var(--main-bg-color, lightgrey)

If --main-bg-color doesn't exist, the color by default will be lightgrey

What are the benefits of using them?

✅ They are easy to write, to use and to maintain. They are reusable in all your CSS files. Super useful when working with components and shared properties/values.

🚀 They can be changed at local scope. I will cover it in the next article, be there!

⚙️ They are accessible at runtime. You can change one variable in your browser to see how it affects your design. Impossible with build time preprocessors. And are accessible by JavaScript: we can create them with JavaScript, use them or change them.

🔲 🔳 When working with dark/light mode or multiple themes in CSS, they are perfect. I will add an example and comparing with the use of SASS variables. Be there too 😉

React, Vue and Svelte: Comparing Checkbox Binding

Clément Creusat — Fri, 08 Apr 2022 11:36:28 +0000

Checkbox Binding in...

You should not fear checkbox binding in any of these frameworks. At least, one checkbox is easy to handle :)
But as we delve deeper into Form Binding, you'll see that Vue and Svelte offer something fluid.

Check it out 🚀

React

Live Example

const [checked, setChecked] = useState<boolean>(false);
const handleCheckbox = () => setChecked(!checked);

<section>
  <h2>Checkbox</h2>
  <input
    type="checkbox"
    id="checkbox"
    checked={checked}
    onChange={handleCheckbox}
  />
  <label for="checkbox">Checked: {checked.toString()}</label>
</section>

Vue

Live Example

const checked: Ref<boolean> = ref(false);

<section>
  <h2>Checkbox</h2>
  <input type="checkbox" id="checkbox" v-model="checked" />
  <label htmlFor="checkbox">Checked: {checked.toString()}</label>
</section>

Svelte

Live Example

let checked: boolean = false;

<section>
  <h2>Checkbox</h2>
  <input type="checkbox" id="checkbox" bind:checked={checked} />
  <label for="checkbox">Checked: {checked}</label>
</section>

React, Vue and Svelte: Comparing Text Input Binding

Clément Creusat — Tue, 05 Apr 2022 18:16:03 +0000

Text Input Binding in...

Text input binding is the simplest thing in form binding. React asks us to write more code to handle this. In the opposite, Vue and Svelte do some magic for us!

Check it out 🚀

React

Live Example

const [text, setText] = useState<string>('Hello');

const handleChange = ({
   target: { value },
}: React.ChangeEvent<HTMLInputElement>) => {
  setText(value);
};

<section>
  <h2>Text Input</h2>
  <input value={text} onChange={handleChange} />
  <p>{text}</p>
</section>

Vue

Live Example

const text: Ref<string> = ref('Hello');

<section>
  <h2>Text Input</h2>
  <input v-model="text" />
  <p>{{ text }}</p>
</section>

Svelte

Live Example

let name: string = 'Hello';

<section>
  <h2>Text Input</h2>
  <input bind:value={name} />
  <p>{name}</p>
</section>

React, Vue and Svelte: Comparing State Management tools

Clément Creusat — Mon, 28 Mar 2022 10:14:27 +0000

State management for...

React

Redux
Recoil

Vue

Pinia
VueX (maintenance mode)

Svelte

Svelte has his own store, you should rely on it
Svelte

Context API in...

React

useContext

Svelte

Context API

React, Vue and Svelte: Comparing Data Rendering

Clément Creusat — Mon, 28 Mar 2022 10:12:08 +0000

Data rendering in...

As you can see, every framework has his own method to loop through data.
React will use map method, Vue has the v-for method and Svelte goes full mustache syntax with {#each}{/each} approach.

Check it out 🚀

React

Link

import { useState } from "react";
const [jobs, setJobs] = useState([
  {id: 1, title: "Frontend Developer"},
  {id: 2, title: "Backend Developer"},
  {id: 3, title: "Fullstack Developer"}
]);

<ul>
  {
    jobs.map((job) => (
      <li>{job.title}</li>
    ))
  }
</ul>

Vue

Link

import { ref } from "vue";
// `reactive` could be used instead of `ref`
const jobs = ref([
  {id: 1, title: "Frontend Developer"},
  {id: 2, title: "Backend Developer"},
  {id: 3, title: "Fullstack Developer"}
]);

<template>
<ul>
  <li v-for="job in jobs" :key="job.id">
    {{ job.title }}
  </li>
</ul>
</template>

Svelte

Link

const jobs = [
  {id: 1, title: "Frontend Developer"},
  {id: 2, title: "Backend Developer"},
  {id: 3, title: "Fullstack Developer"}
];

<ul>
{#each jobs as {id, title}, i}
  <li id={id}>
    {title}
  </li>
{/each}
</ul>

React, Vue and Svelte: Comparing destructuring Props

Clément Creusat — Mon, 28 Mar 2022 10:06:16 +0000

Destructuring `props` in...

When it comes to ES6+, Object and JavaScript, you can use the destructuring method and it works the same because it is just ... well, JavaScript!

Check it out 🚀

React

Link

// Parent Component
<ChildComponent {...user} />
// or
<ChildComponent user={user} />

const Component = ({id, name, lastname}) => {
  return <div id={id}>{name}{lastname}</div>
}

Vue

Link

const props = defineProps({
  user: Object
})
let { id, name, lastname } = props.user;
<template>
<div>{{ id }} {{ name }}</div>
</template>

Svelte

Link

// Parent Component
<ChildComponent {...user} />

// Child Component
export let name;
export let lastname;
export let id;

<div>{name} {lastname} {id}</div>

React, Vue and Svelte: Comparing how to get Props

Clément Creusat — Mon, 28 Mar 2022 10:05:25 +0000

Getting `props` in...

Svelte syntax for getting prop can be kinda confusive. Svelte uses the export term but we are importing some prop...
Vue has his own object method defineProps and React read them through the props object.

Check it out 🚀

React

Link

const Component = (props) => {
  return props.msg
}

Vue

Link

const props = defineProps({
  msg: String
})
<template>{{ msg }}</template>

Svelte

Link

<script>
  export let msg = '';
<script>

{msg}

DEV Community: Clément Creusat

Let's talk React - How to use a Custom Hook multiple times

Making a custom hook real quick..

Using your useCounter hook

with a variable

with destructuring

How to use your useCounter hook multiple times?

with multiple variables

with destructuring

What if returning an Array inside your custom hook?

One time in a component

Multiple times

React, Vue and Svelte: Comparing Multi Select Binding

Multi Select Binding in...

React

Vue

Svelte

React, Vue and Svelte : Comparing Select Binding

Select Binding in...

React

Vue

Svelte

React, Vue and Svelte: Comparing Radio Binding

Input Radio Binding in...

React

Vue

Svelte

React, Vue and Svelte : Comparing Multi Checkbox Binding

Multi Checkbox Binding in...

React

Vue

Svelte

CSS Variables: Quick guide

How do they work?

Top level / Root level

How to declare and use them

The use of the var() function

What are the benefits of using them?

React, Vue and Svelte: Comparing Checkbox Binding

Checkbox Binding in...

React

Vue

Svelte

React, Vue and Svelte: Comparing Text Input Binding

Text Input Binding in...

React

Vue

Svelte

React, Vue and Svelte: Comparing State Management tools

State management for...

React

Vue

Svelte

Context API in...

React

Svelte

React, Vue and Svelte: Comparing Data Rendering

Data rendering in...

React

Vue

Svelte

React, Vue and Svelte: Comparing destructuring Props

Destructuring props in...

React

Vue

Svelte

React, Vue and Svelte: Comparing how to get Props

Getting props in...

React

Vue

Svelte

The use of the `var()` function

Destructuring `props` in...

Getting `props` in...