DEV Community: Emmanuil B.

What I Learned From 1 Year as a Software Developer

Emmanuil B. — Sat, 27 Aug 2022 16:30:26 +0000

It has been over a year since I've started my first professional developer role and to say I've learnt a lot would be an understatement.

I wanted to share my personal writeup of some of the lessons, both technical and work life, that I've learnt.

Don't be afraid of challenging tasks.

It's easy to be intimidated by large, challenging tasks, especially if you feel you arn't ready for them.
However, I found that these kinds of tasks are the best, quickest way to learn.

For me, a task that you don't have an immediate answer to are the best kinds of tasks.
The process of researching and figuring things out is why I enjoy programming.

Learn things as they come up.

You can spend an infinite time learning, so don't learn everything possible before starting to develop something.
Learning to get something done, and then learning improvements and filling in knowledge gaps seems more productive.
On top of this, manually trying is a greater way of internalising the idea than only reading or watching a video.

True power of tests (and typescript).

Having not worked on a large enough project before this first professional role, I have never had a satisfying internalisation of why one should use a bunch of tests.
Of course I knew that the core idea is to check whether your code worked or not, but this never seemed too important (why would you write broken code?).
I was missing the key experience of working on a large, continuously evolving codebase.
Once a codebase stops being static, tools like tests become almost essential.

This is because tests provide the confidence to make possible large scale refactoring.
When refactoring, you need to keep the end behaviour the same, which is hard to do if you have no way of knowing if the end behaviour is in fact the same as before.
As you might expect, larger scale refactoring has large scale ramifications.
Making sure the behaviour stays with the same would be very hard if testing manually.

That is the main idea that helped me understand testing.
Some other ones are:

When not working on an area for a while, tests, along with function names and so on, help me remember the specification.
There have been times where a tiny oversight or use case that I would never have thought about caused a test failure.
Having a steam of green text when running tests is very satisfying.

Read high level dev articles.

By high level, I mean stuff from senior people writing very long, in-depth articles about a particular topic.
These kinds of articles explore a large part of the information space for a given topic, allowing you to see the bigger picture and significantly increasing the efficiency of learning.

When building a feature, keep the future in mind.

Try to account for possible future updates, though not too much, so as to not overbuild.
This has helped me many times, as I don't need to do as much work when building future features, or completely change the way something is implemented to account for the new feature.

Learning is exponential.

A great thing about learning is that it becomes easier the more you learn.
Once you learn something, that understanding allows you to grasp related topics much faster, since it will likely share similarities.

An example is programming languages.
Learning my first language was so much harder than my latest, and it's precisely because similarities mean that everything is not learnt from scratch (even in the case of completely different programming paradigms (e.g., imperative vs functional), there are similarities).

Understanding people (clients) is very important.

As I work independently for a client, I get the raw, non-technical specification.
Understanding that spec and turning it into code is a skill in and of itself.
Having strong communication skills, being able to ask good questions, the ability to explain technical limitations in an understandable manner, all very helpful skills.

Bonus:

Learn some keyboard shortcuts for your IDE.

You don't have to learn Vim, but even a few keyboard shortcuts can dramatically increase your productivity.
For example, for VS Code, Ctrl+P is amazing for quickly finding files.

If you enjoyed this article, please consider sharing it.
Checkout my github and other articles.

Stop Overcomplicating Web Development - Try Svelte

Emmanuil B. — Sun, 20 Mar 2022 10:12:11 +0000

Svelte was rated as the most loved web framework by developers in 2021 (link). So what is Svelte and why is it so loved?

Svelte is a rather unique javascript framework which aims to be 'truly reactive' and help developers 'write less code'.

It has the awesome feature of creating tiny code bundles by making the framework itself 'disappear' in a compilation stage, shipping optimised vanilla JavaScript code rather than using large and complex libraries loaded at run time.
In my opinion, this is the game changer that makes Svelte standout from other JavaScript frameworks. A tiny bundle size means a much faster load time, which seems to be the direction the web is taking as more and more data shows the benefits of a quick website. This compilation stage also removes the need for techniques such as the virtual DOM, used by React and Vue, further increasing the speed of a website.

Another feature is the absence of boilerplate. Svelte feels very close to standard web development, where components can look exactly like vanilla HTML. I’m sure this is a big reason why developers love this framework.

To introduce Svelte, let’s use the the poke api to create a simple single page app where users can select a pokemon, with a live search bar to filter through the list of all the pokemon. This will demonstrate all the core features of Svelte in a useful way. The full code can be found here

Installation
Component Features
Variables & Reactivity
onMount & Async Fetching
Reactive Declarations
Loops
Conditional Rendering
Components & Props
Custom Events
Bind Forwarding
Stores
Final Notes

Installation

Let’s first install basic Svelte. To do this, run the following command

npx degit sveltejs/template new-svelte-project

This will copy the svelte starter template into your desired folder.
To enable typescript, go into your new svelte folder, and run

node scripts/setupTypeScript.js

Now all you need to do is install the necessary files by running

npm install

Component Features

A svelte component is a file ending with .svelte.
As you can see in App.svelte, a Svelte component can be pretty simple, containing three parts; html, a script tag to put your javascript, and a style tag to place css.
This is similar to Vue, just without the boilerplate code.

Clear the script and html contents of App.svelte, and let’s use the given css in the style tag.

Variables & Reactivity

Variables are created in the script tag.
We can create a string variable and display it in the DOM very easily by using curly braces {}.

<!-- For example -->
<script lang="ts">
  let name: string = 'pokemon searcher'
</script>

<h1>{name}</h1>

To search through pokemon names, we’ll need an input field and a variable that holds the contents of that field.
To make the 'pokemonName' variable equal to the contents of an input field, we can use a special svelte keyword 'bind', which enables two way binding of the 'pokemonName' variable.

<!-- App.svelte -->
<script lang="ts">
  let pokemonName: string = ''
</script>

<main>
  <span>Search: </span>
  <input type="text" bind:value="{pokemonName}" />

  <h1>Pokemon: {pokemonName}</h1>
</main>

Now, typing into the input field changes the output of the pokemon title.
This bind keyword enables two way binding without using an 'onInput' function that changes the value of the ‘pokemonName’ variable like in React.

onMount & Async Fetching

For this sample app, we store pokemon names from the pokeapi in a variable as an array of strings.

We want to fetch the data and map it as soon as the component is rendered.
For this, we can use 'onMount', which is a svelte lifecycle function that runs after the component is first rendered to the DOM. Let’s use this to fetch from the pokeapi and map it into an array of pokemon names.

<!-- App.svelte - script tag -->
<script lang="ts">
  import { onMount } from 'svelte'

  let pokemonName: string = ''

  // Fetch from api then store the mapped names.
  let pokemonData: string[] = []
  onMount(() => {
    const setPokemonData = async (): Promise<void> => {
      const rawPokemonData = await (
        await fetch('https://pokeapi.co/api/v2/pokemon?limit=99')
      ).json()

      pokemonData = rawPokemonData.results.map(
        (p: { name: string; url: string }) => p.name
      )
    }
    setPokemonData()
  })
</script>

We now have a list of pokemon names in the 'pokemonData' array, which we can use in our simple project.

Reactive Declarations

For the live search feature, we need to have an array that holds the items filtered by the user input from the pokemon names.

Svelte has an awesome tool to deal with states that are derived from other properties, reactive declarations.
They look like this.

$: reactiveVar = otherVar * 2;

Now, 'reactiveVar' is a variable, but its value is computed every time the 'otherVar' variable changes (svelte runs the computation when the variables used in that computation changes).
We can make the variable that holds the filtered pokemon names into a reactive declaration. We’ll call this 'suggestions'.

<!-- App.svelte - bottom of script tag -->
<script>
  // ...

  let suggestions: string[]
  $: suggestions = 
       pokemonName.length > 0
         ? pokemonData.filter(
             (name) => name.includes(pokemonName)
           )
         : pokemonData
</script>

So, 'suggestions' is an array of pokemon names that includes the string entered in the input field.
The reactive assignment doesn’t work with typescript, so we can declare a 'suggestions' variable normally to preserve type checks.

Loops

We’ll want to display the contents of this 'suggestions' array on the page, and we can do this by using a svelte loop. Svelte has a special keyword 'each' that enables us to display DOM elements for each item in the given iterable.
To display each pokemon name, simply use the each keyword to loop over the 'pokemonData' variable.

<!-- App.svelte - html -->
<main>
  <span>Search: </span>
  <input type="text" bind:value="{pokemonName}" />

  {#each suggestions as suggestion}
    <h2>{suggestion}</h2>
  {/each}
</main>

As we type into the input field, we can see the list of suggestions change. Pretty cool for such simple code.

Conditional Rendering

Svelte has other keywords. Another useful one is #if.
The #if keyword allows for conditional logic.
For example, we can render a loading screen while we fetch the data from the pokeapi.

<!-- App.svelte - html -->
<main>
  {#if pokemonData && pokemonData.length > 0}
    <span>Search: </span>
    <input type="text" bind:value="{pokemonName}" />

    {#each suggestions as suggestion}
      <h2>{suggestion}</h2>
    {/each}
  {:else}
    <h2>Loading...</h2>
  {/if}
</main>

Components & Props

Props are used to pass data from one component to another. This is fairly standard for frameworks, and the syntax for this is very simple.
To signal that a component accepts a prop, an export keyword is used for a variable.

<script lang="ts">
  export let stringProp: string
</script>

Now, to pass the value for 'stringProp', simply use the name of the exported variable when writing the component.

<script lang="ts">
  import NewComponent from './NewComponent.svelte'
</script>

<NewComponent  stringProp="prop value"  />

For our app, let’s create a component for each suggestion.
Create a new file 'Suggestion.svelte' in src/, and simply accept and display a 'suggestion' prop.

<!-- Suggestion.svelte -->
<script lang="ts">
  export let suggestion: string
</script>

<div class="suggestion">{suggestion}</div>

<style>
    .suggestion {
        font-size: 1.25rem;
    }
</style>

Now, we can import this component and use it in our #each loop.

<!-- App.svelte - top of script tag -->
<script lang="ts">
  import Suggestion from './Suggestion.svelte'

  // ...
  // ...
</script>

<!-- App.svelte - html -->
<main>
  {#if pokemonData && pokemonData.length > 0}
    <span>Search: </span>
    <input type="text" bind:value="{pokemonName}" />

    {#each suggestions as suggestion}
      <Suggestion suggestion="{suggestion}"/>
    {/each}
  {:else}
    <h2>Loading...</h2>
  {/if}
</main>

This is pretty pointless at the moment, so let’s add some logic to the 'Suggestion' component in the form of events.

Custom Events

Custom events can be dispatched from one component to another. This allows us to have parent-child communication.
For our app, we want to be able to click on a suggestion to select our pokemon. We can do this by dispatching a custom event from the 'Suggestion' component to the App component, and then setting the value of a variable which holds our chosen pokemon.

First, create the new 'chosenPokemon' variable, and display it on the screen in App.svelte.

<!-- App.svelte - bottom of script tag -->
<script lang="ts">
  // ...
  // ...

  let chosenPokemon: string = ''
</script>

<!-- App.svelte - html -->
<main>
  {#if pokemonData && pokemonData.length > 0}
    <h1>Chose Your Pokemon</h1>
    <h2>Chosen Pokemon: {chosenPokemon}</h2>

    <div>
      <span>Search: </span>
      <input type="text" bind:value="{pokemonName}" />

      {#each suggestions as suggestion}
        <Suggestion suggestion="{suggestion}"/>
      {/each}
    </div>
  {:else}
    <h2>Loading...</h2>
  {/if}
</main>

Now, in Suggestion.svelte, we can dispatch a custom 'chosePokemon' event when clicking on a suggestion.
To create a custom event, we need to import the ‘createEventDispatcher’ from svelte.

<!-- Suggestion.svelte - script tag -->
<script lang="ts">
  import { createEventDispatcher } from 'svelte'

  export let suggestion: string

  // Function to dispatch a custom event.
  const dispatch = createEventDispatcher()
  const chosePokemon = (): void => {
    dispatch('chosePokemon', {
      pokemon: suggestion
    })
  }
</script>

We now have a 'chosePokemon' function that dispatches a custom 'chosePokemon' event to the parent component.

To call this function when clicking on a suggestion, we need to use the svelte 'on:click' event like this.

<!-- Suggestion.svelte - html -->
<div class="suggestion" on:click="{chosePokemon}">
  {suggestion}
</div>

Back in the App.svelte file, we can handle this custom event by using the 'on:(event name)' syntax.

<!-- App.svelte - 'Suggestion' component in html -->
<Suggestion
  suggestion="{suggestion}"
  on:chosePokemon="{(e) => {
    chosenPokemon = e.detail.pokemon
  }}"
/>

This handler sets the value of the chosenPokemon variable to be equal to the pokemon name passed in the custom event (located in the 'detail' property).
When we click on a suggestion, that pokemon name is shown.

I've set the 'chosenPokemon' variable this way to introduce custom events, however, there is a much cleaner and easier way of doing this: bind forwarding.

Bind Forwarding

We saw how the bind keyword was used to set up two way binding when creating an input field, but this keyword can also be used across our components.

In App.svelte, we can replace the chosePokemon event handler with a bind keyword on a chosenPokemon prop.

<!-- App.svelte - 'Suggestion' component in html -->
<Suggestion suggestion="{suggestion}" bind:chosenPokemon />

And in the 'Suggestion' component we can accept this prop and make the 'on:click' function simply set this 'chosenPokemon' variable.

<!-- Suggestion.svelte -->
<script lang="ts">
  export let suggestion: string
  export let chosenPokemon: string = ''
</script>

<div 
  class="suggestion" 
  on:click="{() => chosenPokemon = suggestion}"
>
  {suggestion}
</div>

We now have the same functionality as before using a fraction of the code.

Stores

I want to wrap things up by introducing stores.
With Svelte, we don’t need to use an external library like Redux to have a central store, it comes with the framework.

Fundamentally, a store is an object with a subscribe method that allows our Svelte components to be notified of any changes to the store value. Svelte defines 2 different types of stores, a writable store, and a readable store. As the names suggest, a writable store allows reads and writes, while a readable store only allows a read.

For our app, we’ll send the 'pokemonData' variable into the store. Since this variable simply gathers and stores the pokemon data, we’ll use a readable store.

First, we need a new file in the src folder (I’ll name it ‘stores.ts’).
We can import the readable store function from svelte, along with the required types.

// stores.ts
import { readable, Readable, Subscriber } from 'svelte/store'

A readable function, as its first argument, takes the store’s initial value, and, as its second argument, a 'start' function.
This 'start' function is called when the store gets its first subscriber, so it is where we’ll retrieve our api data.
The function receives a 'set' callback function, which is used to set the value of the store, and returns a 'stop' function which is called when the last subscriber unsubscribes (where we can perform some cleanup).

In our store, we can simply copy the contents of our 'setPokemonData' function, but instead of assigning the value of 'pokemonData', we call the 'set' function.

import { readable, Readable, Subscriber } from 'svelte/store'

const setPokemonData = 
  async (set: Subscriber<string[]>): Promise<void> => {
    const rawPokemonData = await (
      await fetch('https://pokeapi.co/api/v2/pokemon?limit=99')
    ).json()

    set(
      rawPokemonData.results.map(
        (p: { name: string; url: string }) => p.name
      )
    )
  }

// Export the new store 'pokemonData' variable.
export const pokemonData: Readable<string[]> = 
  readable([], (set) => {
    setPokemonData(set)

    return () => set([])
  })

That’s it. We now have a central store holding our pokemon names in 'pokemonData'.

To use our store, we need to import the 'pokemonData' variable from our store file.
We can then use the special svelte '$' symbol to reference the store's value.

<!-- App.svelte -->
<script lang="ts">
  import { pokemonData } from './stores.js'
  import Suggestion from './Suggestion.svelte'

  let pokemonName: string = ''

  let suggestions: string[]
  // $pokemonData instead of pokemonData
  $: suggestions =
    pokemonName.length > 0
      ? $pokemonData.filter((name) => 
          name.includes(pokemonName)
        )
      : $pokemonData

  let chosenPokemon: string = ''
</script>

<main>
  {#if $pokemonData && $pokemonData.length > 0}
    <h1>Chose Your Pokemon</h1>
    <h2>Chosen Pokemon: {chosenPokemon}</h2>

    <div>
      <span>Search: </span>
      <input type="text" bind:value="{pokemonName}" />
      {#each suggestions as suggestion}
        <Suggestion 
          suggestion="{suggestion}" 
          bind:chosenPokemon 
        />
      {/each}
    </div>
  {:else}
    <h2>Loading...</h2>
  {/if}
</main>

Our app works the same, but our api data is now centrally stored and can be used in any component.

Now, while svelte has writable and readable stores, anything that sticks to the svelte store 'contract' and implements the subscribe method is a store.
This means that stores are very flexible and can be tailored to your needs. You can even create a store in another language, like Rust, as shown here.

Final Notes

Svelte stands out in the cluttered world of JavaScript frameworks by not compromising user experience for developer experience or vice versa.
Svelte provides fantastic tools to make developing apps easy, while it’s compiler results in a tiny package for end users, reducing download times significantly.

Svelte has been among the most loved frameworks for a while now, even as its usage grows, a potential sign that it will become as big as Vue or React. This coincides with the recent push towards a more performant web, moving away from crazy large JavaScript packages served to the client towards server-side or hybrid rendering.

The Svelte team is now working on SvelteKit, which is Svelte’s version of Next.js, which you can learn about here.

If you enjoyed this article, please consider sharing it.
Checkout my github and other articles.

Techniques for Writing Cleaner JavaScript with ES6+ (How many do you know? 💪)

Emmanuil B. — Wed, 22 Dec 2021 19:45:34 +0000

Nullish Coalescing Operator (??)

The nullish coalescing operator is amazing when working with possibly undefined data.
This operator tells JavaScript to return the data on its right side when its left side is null or undefined (nullish).

// returns 'default value'
null ?? 'default value'

This operator can be used to define a default value for possibly nullish data, avoiding verbose code checking if some data is not defined.

// if 'name' is not defined,
// we pass a default string into our function.
customFunc(name ?? 'default')

Note vs OR operator

A lot of people think this is what the OR (||) operator does.
However, the OR operator returns its right side when the left side is falsy, not just nullish. This includes data such as 0 and ''.

Optional Chaining (?.)

Using optional chaining, when accessing properties, if any property reference is nullish, the expression returns undefined instead of causing an error.

const object = {
  property1: {
    name: 'P1'
  }
}

// returns undefined and doesn't cause an error
object.property2?.name

This also works when calling functions.

// will call 'customFunc' if it exists on 'object',
// or returns undefined if not.
object.customFunc?.()

Optional chaining can be used to avoid having a conditional statement every time there is some data that can be possibly undefined, making your code significantly cleaner.

💡 Tip: The nullish coalescing and optional chaining operators are best used with TypeScript, since you'll know exactly when to use them.

Logical AND Short-circuit Evaluation

When using the AND (&&) operator, the right side expression is only evaluated if the first value is truthy.

// returns 'this'
true && 'this'

Short-circuiting with the && operator allows you to evaluate a condition before you call a function.
This way, you can avoid the need to write a verbose if statement before calling something.

// calls func() if 'variable' is true
variable && func()

Includes()

Array.includes() is a way of checking if an array contains something.

[1, 2, 3].includes(2) // returns true

This can be used to as a way of avoiding multiple conditional checks, shortening your code, as well as making it more readable.

// instead of this
if(var === 'A' || var === 'B' || var === 'C')
  return var

// do this
if(['A', 'B', 'C'].includes(var)) 
  return var

For Of & forEach()

Looping can be done much cleaner using 'for of' and '.forEach()', rather than a traditional for loop.
A big point for using forEach() is that it can be chained, making your code much more concise and readable.

// a tiny amount of code for looping over wanted items in an array.
// can be chained further for more complicated cases.
arr.filter((i) => i > 0)
   .forEach((v, i) => console.log(v));

On the downside, there are a lot of edge cases when using forEach(), such as not including empty elements and not working quite right with async/await code.
For such cases, it's best to use 'for of', which is also pretty concise while not having as many edge cases as forEach() or 'for in'.

// for performing the same function as above.
// not as concise for more complicated cases but more robust.
for (const i of arr.filter((i) => i > 0)) 
  console.log(i)
// or
for (const i of arr) 
  if(i > 0) console.log(i)

Spread Syntax (...)

The spread syntax has multiple uses, useful when trying to keep code concise.
When used with arrays, it can be used to combine two arrays, or insert something in to an array.

// combine two arrays, inserting '3' between the two.
const arr1 = [1, 2]
const arr2 = [4, 5]

const newArr = [...arr1, 3, ...arr2]
// newArr = [1, 2, 3, 4, 5]

Similarly, with objects, we can use the spread syntax to clone another object, while also being able to add new properties.

// create a new object with the same properties as obj1 and obj2,
// while also adding another property 'newProperty'.
const obj1 = {property1: 'p1'}
const obj2 = {property2: 'p2'}

const newObj = {...obj1, ...obj2, newProperty: 'newP'}
// newObj = {property1: 'p1', property2: 'p2', newProperty: 'newP'}

Destructuring and the Rest Operator (...)

Destructuring can be used in many contexts to get distinct variables from array values or object properties.
This is a great way of cleanly getting deeply nested object properties.

// getting the 'id' property from obj.
const obj = {id: 1}

const {id} = obj
// id = 1

// or we can have a custom variable name.
const {id: idLabel} = obj
// idLabel = 1

Similarly, the rest operator can be used to separate out properties from an object.
This is useful for quickly copying an object while removing some properties.

// copying obj1, removing the 'unwanted' property.
const obj = {id: 1, unwanted: 2}

const {unwanted, ...newObj} = obj
// newObj = {id: 1}

💰 Bonus: Remove Duplicates from an Array

Want a quick way of removing duplicate primitive elements from an array? It's very easy with a tiny bit of code using 'new Set()'.
Combining this with other clean code techniques can lead to some very powerful actions with minimal, yet readable, code.

// using set with the spread syntax to combine two arrays, removing duplicates (a union).
const arr1 = [1, 2, 3]
const arr2 = [3, 4, 5]

const arr3 = [...new Set([...arr1, ...arr2])] 
// arr3 = [1, 2, 3, 4, 5] as an array

Thanks for reading ❤️. If you enjoyed this article, please consider sharing it.
Checkout my github, website, and other articles.

Stop Overcomplicating your State – Try Zustand

Emmanuil B. — Sat, 30 Oct 2021 18:18:36 +0000

How to create a store
Async Actions
Equality
Middleware
Store Slices
Testing Your store
Final Notes

With the advent of hooks, a lot of React developers have started to move away from Redux as the default state manager of choice.
Many new alternative state managers have become popular. One of which is Zustand.

Zustand is a modern state manager that fits nicely in this world of hooks. It is lightweight (only 66.4 kB unpacked), fast, and hooks-based. The brilliance of Zustand is that it’s simple yet powerful.

I stumbled upon Zustand when redesigning our app’s state management. The complexity of Redux and immaturity of React Context made us want to move to another state manager. Having been burned by Redux’s aforementioned complexity, Zustand drew me in with its promised simplicity, describing itself as a ‘barebones’ state manager.

I want to highlight some key aspects of Zustand, and show how it can be used in a project.

I'm going to be demonstrating Zustand using my testing project starwars-searcher. This is a very simple app that utilizes the swapi api for a live search feature. Let's extend this project to retrieve star wars planet names from the api and display them on a list, using Zustand as our state manager.

How to create a store

First, let's install Zustand.

npm install zustand # or yarn add zustand

Creating a store is a very simple process.
We'll use Zustand's 'create' to make a react hook which we will call 'useStore'. I’ll avoid typing for now (we’ll talk in depth about using zustand with typescript soon).

import create from "zustand";
export const useStore = create<any>(
    set => ({
    })
);

Now we can to set the store's initial state.
We'll create a variable to store planet names, and a function to set that variable.

export const useStore = create<StoreType>((set) => ({
    planetNames: [],
    setPlanetNames: (data: any) => set({ planetNames: data })
}));

And that's it!
With our store created, let's import it into a React component to store planet names from the swapi api.

const planetNames = useStore((state) => state.planetNames);
const setPlanetNames = useStore((state) => state.setPlanetNames);

useEffect(() => {
    const populatePlanetsFromAPI = async () => {
        const planetsData = await (
            await fetch("https://swapi.dev/api/planets")
        ).json();
        setPlanetNames(planetsData.results.map((pd: any) => pd.name));
    };

    populatePlanetsFromAPI();
}, []);

return (
    <div>
        <h1>Planet Names</h1>
        <ul data-testId='planets-list'>
            {planetNames.map((name: any) => (
                <li key={name} data-testId={`planet-${name}`}>
                    {name}
                </li>
            ))}
        </ul>
    </div>
);

As you can see, it's very easy to set up a Zustand store.

Async Actions

Of course, a real world application utilizes asynchronous actions, something which is rather frustrating in redux.
In Zustand however, performing asynchronous actions has no additional complexity. Simply tag make the store's funciton as async, and use the await keyword to wait for actions to finish.
We'll move the fetch from the useEffect to the store by adding a retrieve function.

retrievePlanetNames: async () => {
    const planetsData = await (
        await fetch("https://swapi.dev/api/planets")
    ).json();

    set({ planetNames: planetsData.results.map((pd: any) => pd.name });
}

We can now simply use this function in the useEffect.

Equality

You can define how Zustand checks equality between objects by passing in an equality function as the second parameter.
By default, properties are compared with strict-equality, but we can compare using shallow checks by passing in Zustand’s shallow function. The differences between default and shallow are demonstrated below.
You can also create your own comparison function for greater control over re-rendering.

// Same behaviour when values are primitives.
Object.is(1, 1) // True
shallow(1, 1) // True

// But when values are objects:
Object.is({number: 1}, {number: 1}) // False
shallow({number: 1}, {number: 1}) // True

Middleware

Another awesome feature of Zustand is the ability to create middleware to add additional features to your store. For example, you can easily create middleware to log state changes.

const log = config => (set, get, api) => config(args => {
  console.log("Applying", args)
  set(args)
  console.log("New State", get())
}, get, api)

Redux Dev Tools

With the middleware functionality, we can easily actually use an amazing extension created for Redux, Redux DevTools link. We just need to import the devtools middleware, and attach it to our store.

import { devtools } from "zustand/middleware";

export const useStore = create<any>(
    devtools((set) => ({
        planetNames: [],
        getPlanetNames: async () => {
            const planetsData = await (
                await fetch("https://swapi.dev/api/planets")
            ).json();

            set({ planetNames: planetsData.results.map((pd: any) => pd.name) });
        },
        setPlanetNames: (data: any) => set({ planetNames: data })
    }))
);

Now we can visually see everything stored, and look through the store’s timeline, which is very cool and useful.

Immer + Typescript

Immer is another great package that makes reducing nested structures easy.
We can create middleware to allow us to use immer easily. Here is a fully typed version.

import create, { State, StateCreator } from "zustand";
import produce, { Draft } from "immer";

export type StoreType = {
    readonly planetNames: string[];
    getPlanetNames: () => Promise<void>;
    setPlanetNames: (data: any) => void;
};

const immer =
    <T extends State>(config: StateCreator<T>): StateCreator<T> =>
    (set, get, api) =>
        config(
            (partial, replace) => {
                const nextState =
                    typeof partial === "function"
                        ? produce(partial as (state: Draft<T>) => T)
                        : (partial as T);
                return set(nextState, replace);
            },
            get,
            api
        );

export const useStore = create<StoreType>(
    devtools(
        immer((set, get) => ({
              planetNames: [],
              getPlanetNames: async () => {
                const planetsData = await (
                    await fetch("https://swapi.dev/api/planets")
                ).json();

                set({ planetNames: planetsData.results.map((pd: any) => pd.name) });
              },
              setPlanetNames: (data: any) => set({ planetNames: data })
        }))
    )
);

Store Slices

When working with Zustand, your store might become quite dense. Keeping all of your app’s state in one file becomes unfeasible.
Luckily, you can easily split your store into various functions to keep your files small and manageable.
Here’s a simple example from Zustand’s docs.

import create from 'zustand'

const createBearSlice = (set, get) => ({
   eatFish: () => set((prev) => ({ fishes: prev.fishes > 1 ? prev.fishes - 1 : 0}))
})

const createFishSlice = (set, get) => ({
   fishes: 10
})

const useStore = create( (set, get) => ({
    ...createBearSlice(set, get),
    ...createFishSlice(set, get)
}))

As you can see, store slices can interact with each other. However, if we want to keep slices separate, we can set up typescript to not allow slices to interact with each other.

In my testing project, I have a few more variables and functions in my store. These are used to get people, planet, and species data from the swapi api for a live search page (link).
As an exercise, we’ll separate data used for this functionality from the planet names list we created in this article.
Here is the store slice for our planet names data with typescript.

import { GetState, SetState, StateCreator, StoreApi } from "zustand";

export interface PlanetNamesSlice {
    readonly planetNames: string[];
    getPlanetNames: () => Promise<void>;
    setPlanetNames: (data: string[]) => void;
}

const createPlanetNamesSlice:
    | StateCreator<PlanetNamesSlice>
    | StoreApi<PlanetNamesSlice> = (set, get) => ({
    planetNames: [],
    getPlanetNames: async () => {
        const planetsData = await (
            await fetch("https://swapi.dev/api/planets")
        ).json();

        set({ planetNames: planetsData.results.map((pd: any) => pd.name) });
    },
    setPlanetNames: (data: string[]) => {
        set({ planetNames: data });
    },
});

export default createPlanetNamesSlice as (
    set: SetState<PlanetNamesSlice>,
    get: GetState<PlanetNamesSlice>,
    api: StoreApi<PlanetNamesSlice>
) => PlanetNamesSlice;

And we can use it to create our central store like so.

interface IStore extends PlanetNamesSlice, StarWarsDictSlice {}

export const useStore = create<IStore>(
    devtools(
        immer((set, get, api) => ({
            ...createPlanetNamesSlice(
                set as unknown as SetState<PlanetNamesSlice>,
                get as GetState<PlanetNamesSlice>,
                api as unknown as StoreApi<PlanetNamesSlice>
            ),
            ...createStarWarsDictSlice(
                set as unknown as SetState<StarWarsDictSlice>,
                get as GetState<StarWarsDictSlice>,
                api as unknown as StoreApi<StarWarsDictSlice>
            ),
        }))
    )
);

Now you have a much cleaner store with types and typescript enforcement of slice separation.

Testing Your Store

To test our store using jest, we’ll need some packages.
React testing library
Rect testing - hooks

With react-hooks-testing, it’s very easy to test the functions of our store.
One important thing to know is that the store’s state is kept between tests. We can deal with this in many ways. One way is to set the content of the store before each test, and another is to set up a mock of Zustand which resets the store each time; you can decide which route to take.
Now let's test our set function:

import { act, renderHook } from "@testing-library/react-hooks";
import { cleanup } from "@testing-library/react";
import { useStore } from "./useStore";

describe("useStore", () => {
    afterEach(() => {
        // You can chose to set the store's state to a default value here.
        jest.resetAllMocks();
        cleanup();
    });

    it("The setPlanetNames function correctly sets the planetNames variable.", () => {
        const { result } = renderHook(() => useStore((state) => state));

        act(() => {
            result.current.setPlanetsData(["earth"]);
        });

        expect(result.current.planetsData).toEqual(["earth"]);
    });
});

As you can see, it’s very easy to unit test our store.

In case you are wondering how to test components that use the store, we can easily mock our store with the required returned values.

it("Component gets data from the store.", async () => {
    jest.spyOn(Store, "useStore").mockImplementation((fn) =>
        fn({
            planetNames: ["Tatooine", "Mandalore"],
            infoDict: {},
            infoNamesArr: [],
            setPlanetNames: (data) => {},
            getPlanetNames: async () => {},
            populateWithAPI: async () => {},
        })
    );

    render(<PlanetsMap />);

    const listOfPlanets = screen.getByTestId("planets-list");
    expect(listOfPlanets.children).toHaveLength(2);

    expect(screen.queryByTestId("planet-Tatooine")).toBeTruthy();
    expect(screen.queryByTestId("planet-Mandalore")).toBeTruthy();
});

I believe that the ease of testing is a great benefit of Zustand.

Final Notes

In my opinion Zustand is a very refreshing state manager. The absence of boilerplate makes it such a nice option for personal projects where one doesn’t want to spend an afternoon setting up a store with a single variable.

However, this is not to say that Zustand is only suitable for small, personal projects. Having worked with Zustand in a real production environment, its advanced features make it a powerful tool on par with something like Redux.
While seemingly basic, custom equality functions, middleware, and store slices can make Zustand a strong tool for central state management.

Looking at some of the downsides, Zustand's middleware is very type unfriendly, an issue that Zustand is currently looking at (link). Also, Zustand's documentation could use some more work, such as showing how to handle nested state, how best to test our stores, and detailing how to handle multiple middlewares.

Other Options

Nowadays, there's quite a bit of options for central state management; Jotai, Recoil, and React-query, among others. I haven’t looked into these, but would like to in the future.

What do you think? Does zustand sound like something you’d like to use, or do you really like your current state manager?

If you enjoyed this article, please consider sharing it.
Checkout my github, website, and other articles

DEV Community: Emmanuil B.

What I Learned From 1 Year as a Software Developer

Don't be afraid of challenging tasks.

Learn things as they come up.

True power of tests (and typescript).

Read high level dev articles.

When building a feature, keep the future in mind.

Learning is exponential.

Understanding people (clients) is very important.

Bonus:

Learn some keyboard shortcuts for your IDE.

Stop Overcomplicating Web Development - Try Svelte

Table of Contents

Installation

Component Features

Variables & Reactivity

onMount & Async Fetching

Reactive Declarations

Loops

Conditional Rendering

Components & Props

Custom Events

Bind Forwarding

Stores

Final Notes

Techniques for Writing Cleaner JavaScript with ES6+ (How many do you know? 💪)

Nullish Coalescing Operator (??)

Note vs OR operator

Optional Chaining (?.)

💡 Tip: The nullish coalescing and optional chaining operators are best used with TypeScript, since you'll know exactly when to use them.

Logical AND Short-circuit Evaluation

Includes()

For Of & forEach()

Spread Syntax (...)

Destructuring and the Rest Operator (...)

💰 Bonus: Remove Duplicates from an Array

Stop Overcomplicating your State – Try Zustand

Table of Contents

How to create a store

Async Actions

Equality

Middleware

Redux Dev Tools

Immer + Typescript

Store Slices

Testing Your Store

Final Notes

Other Options