DEV Community: Yussif Mohammed

Implement Dark Mode on Any Website Effortlessly

Yussif Mohammed — Sun, 15 Jan 2023 14:36:07 +0000

We'll be going through how to easily add dark mode to any website regardless of the framework. The key here is using custom properties (css variables).

This is the website we'll be adding dark mode to

You can see we have a white background and content with different shades of gray etc.

To add dark mode we simply use custom properties to hold each color instead of hard coding them in the css this way we just change the value of these custom properties based on the theme.
If you don't know what custom properties are you can read more about them here

This is what our css currently looks like

body {
  background-color: white;
}
.contents {
  display: flex;
  justify-content: space-between;
  padding: 30px;
  margin-top: 30px;
  border-top: 3px solid #333
}

.content-container {
  border-radius: 10px;
  width: 300px;
  padding: 10px 30px;
  flex-wrap: wrap;
  background-color: #EAEAEA;
}

.content-container p {
  color: #333
}

Now let's write some custom properties and assign the colors to them. We'll be applying those custom properties to the body tag so we can reuse it for any child node.

body {
  /*light theme by default*/
  --bg-color: white; 
  --color: black;
  --accent-1: #EAEAEA;
  --accent-2: #333;
  background-color: var(--bg-color);
  color: var(--color)
}
.contents {
  display: flex;
  justify-content: space-between;
  padding: 30px;
  margin-top: 30px;
  border-top: 3px solid var(--accent-2)
}

.content-container {
  border-radius: 10px;
  width: 300px;
  padding: 10px 30px;
  flex-wrap: wrap;
  background-color: var(--accent-1);
}

.content-container p {
  color: var(--accent-2)
}

Now we've used custom properties to store the colors and it's exactly as before. Now to add dark mode we simply create a class .dark and reassign the value of those custom properties to reflect our dark theme colors. Due to the cascading nature of CSS, where styles are applied based on a priority system and classes are more specific (i.e higher priority) than HTML tags, if the body tag has the class .dark the custom properties of the class will be used and so to toggle dark mode all we need to do is set the class of the body tag to .dark

.dark {
  /* dark theme custom variables*/
  --bg-color: black; 
  --color: white;
  --accent-1: #111;
  --accent-2: #999;
}

Now when we add the .dark class to the body tag in the HTML, it'll switch to dark mode (yeah, just like that). But that's not how users change dark mode, so we need to add a button that when the user clicks we either add the .dark class or remove it for dark theme and light theme respectively.
Let's add a button and script to our HTML to handle this.
Add inside the body tag

<button id="button" onclick="toggleTheme()">toggle theme</button>
  <script>
  let body = document.getElementById("root")
  function toggleTheme() {
    const cls = body.className
    if(cls === "") {
      body.className = "dark"
   document.documentElement.style.colorScheme = "dark"
    }else {
            body.className = ""
   document.documentElement.style.colorScheme = ""
    }
  }
  </script>

setting the document.documentElement.style.colorScheme is necessary to make the scroll bar, , , etc also reflect the appropriate theme.

Here is the final results

You should also save the preferred theme to local storage and set the appropriate theme whenever a page loads

Conlusion

Everything is better with dark mode, add it to your website now. If you have any questions let me know in the comments.

CSS Animation: A circle with smaller circles orbiting it.

Yussif Mohammed — Sun, 15 Jan 2023 01:36:00 +0000

Here is what we will be making

Starting with the HTML

We create a container .container which centers all other content
Another container .hero-circle that contains the content
Add img inside .hero-circle
Created another container .hero-rotate inside .hero-circle
Lastly we add 4 divs .planet inside .hero-rotate each container an img

HTML

<div class="container">
  <div class="hero-circle">
    <img class="inner-img"
      src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e?ixlib=rb-0.3.5&q=80&auto=format&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=7ab1744fe016fb39feb2972244246359"
      alt="" />
    <div class="hero-rotate" id="circle">
      <div class="planet">
        <img
          src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e?ixlib=rb-0.3.5&q=80&auto=format&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=7ab1744fe016fb39feb2972244246359"
          alt="" />
      </div>
      <div class="planet">
        <img
          src="https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?ixlib=rb-0.3.5&q=80&auto=format&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=86dc2dcb74588b338dfbb15d959c5037"
          } alt="" />
      </div>
      <div class="planet">
        <img
          src="https://images.unsplash.com/photo-1484402628941-0bb40fc029e7?ixlib=rb-0.3.5&q=80&auto=format&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=6237e62a10fa079d99b088b0db0144ac"
          alt="" />
      </div>
      <div class="planet">
        <img
          src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&q=80&auto=format&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=882e851a008e83b7a80d05bdc96aa817"
          alt="" />
      </div>
    </div>
  </div>
</div>

Now The CSS

Our outermost div (.container) is covers the entire screen and centers .hero-circle. We'll also add custom properties for the diameter(width and height) of the .hero-circle and the diameter of .planet. This way all we need to do is change the value of those custom properties to make it responsive on small screens

.container {
    display: grid;
    width
    height:100vh;
    place-items: center;
    overflow: hidden;
    background-color: black;
    --circleDiameter: 300px;
    --planets: calc(var(--circleDiameter) / 5)
}

Now we set the width and height of our content container .hero-circle to the --circleDiameter custom property

.hero-circle {
    position:relative;
    width: var(--circleDiameter);
    height: var(--circleDiameter)
}

What's next is to place the center image at the center of .hero-circle

.inner-img {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  border-radius:10px;
  width:90px;
  height:90px;
}

that's one way to center a div 😉

We then create the big circle .hero-rotate

.hero-rotate {
    position: relative;
    top: -7px;
    left:-7px;
    width: 100%;
    height: 100%;
    border: 7px solid white;
    border-radius: 100%;
    animation: rotate 30s linear infinite;
}

We'll add the animation later

Add styles to .planets and the image inside each planet

.planet {
    position: absolute;
    width: var(--planets);
    height: var(--planets);
    border-radius: 100%;
    animation: maintain 30s linear infinite;
}

.planet>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    animation: scale 1s linear infinite alternate; 
}

At this point we haven't added the animations yet and we should have something like this.

You only see one image on the circle because they are stacked on each other.

To place the .planets evenly around the bigger circle .hero-rotate, we'll be using the --planets custom property to calculate where to place each circle for responsiveness.
Since there are four .planets we would place them top-center, left-center, bottom-center and right-center

place .planets

.planet:nth-child(1) {
    top: calc(-1 * var(--planets) / 2);
    left: calc(var(--circleDiameter)/ 2 - var(--planets) / 2)
}

.planet:nth-child(2) {
    top: calc(var(--circleDiameter)/ 2 - var(--planets) / 2);
    right: calc(-1 * var(--planets) / 2);
}

.planet:nth-child(3) {
    top: calc(var(--circleDiameter)/ 2 - var(--planets) / 2);
    left: calc(-1 * var(--planets) / 2);
}

.planet:nth-child(4) {
    left: calc(var(--circleDiameter)/ 2 - var(--planets) / 2 );
    bottom: calc(-1 * var(--planets) / 2);
}

You can adjust the position as you like

Animations

Animations are simple.
First we rotate the outer circle .hero-rotate which will make it seem like it's the .planets that are moving
the rotate animation

@keyframes rotate {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg);
    }
}

From the above preview we could see that the images are turning over because of the rotatoin and we don't that.
To solve that we simply make .planet rotate in the opposite direction and also add scale animation to the images

@keyframes maintain {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes scale {
    0% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

The final out put

That's it, if anything is unclear, ask in the comments and I'll explain further.

ciao

Topological sort and why you're getting cyclic dependency errors

Yussif Mohammed — Thu, 05 Jan 2023 19:51:53 +0000

There is a good chance you've came across cyclic dependency errors while building applications in React, React Native, Angular, Vue, Go, NodeJS etc.
In some programming languages like Go, cyclic dependency is a compile time error that must be fixed before the program works but in React it's just a warning, which can cause unexpected behaviors in your application.

In this article we'll be discussing cyclic dependency errors, what they are, how to avoid them and how the underlying algorithm (topological sort) works.

Understanding Cyclic Dependency Errors

Cyclic dependency errors occur when two or more modules, classes, or objects depend on each other in a circular manner. This creates a situation in which the modules, classes, or objects cannot be used or instantiated because their dependencies are not satisfied.

What does depend on each other in a circular manner mean?
To under this let's first talk about how files are built (declaring & initializing variables, classes, objects and imports) when we run a program.
Assuming we're writing a React program with files named A.jsx, B.jsx and C.jsx with the following codes in them

A.jsx

import B from "./B"
import C from "./C"

function A() {
    return (
        <div>
            <C section={"About: My name is John Doe..."} />
            <C section={"Work: I work at ..."} />
            <C section={"Education: I went to ..."} />

            <B text={"toggle dark mode"} />
        </div>
    )
}

export default A

B.jsx

function B(props) {
    return (
        <button>
            {props.text}
        </button>
    )
}

export default B

C.jsx

import B from "./B"
function C(props) {
    return (
        <div>
            <p>{props.section}</p>
            <B text={"Find out More"} />
        </div>
    )
}

export default C

From the above code example we can see;

A.jsx imports (depends on) B.jsx and C.jsx
B.jsx has no imports (0 dependencies)
C.jsx imporst B.jsx

Diagram to represent the above structure

When building the above program, the order of the files in your working directory doesn't matter. The files are built in such a way that before a file is built all of it's dependencies (imports) musts be built first, which means the first file to be built must not import any file. Sorting the files in such a way is called topological sort which then gives the order in which the files would be built (build order). The build order for the above program will be.

Cyclic dependencies

Let's modify the our previous code examples

A.jsx

import B from "./B"
import C from "./C"

function A() {
    return (
        <div>
            <C section={"About: My name is John Doe..."} />
            <C section={"Work: I work at ..."} />
            <C section={"Education: I went to ..."} />

            <B text={"toggle dark mode"} />
        </div>
    )
}

export default A

B.jsx

import { D } from './C'

function B(props) {
    return (
        <div>
            <button>
                {props.text}
            </button>
            <D />
        </div>
    )
}

export default B

C.jsx

import React from 'react'
import B from "./B"

export default function C(props) {
    return (
        <div>
            <p>{props.section}</p>
            <B text={"Find out More"} />
        </div>
    )
}

export function D() {
    return (
        <span>more info</span>
    )
}

From the above second code example B.jsx now imports a component from C.jsx
Dependency structure of second code example

The diagram shows that B.jsx and C.jsx have a circular dependency, as B.jsx imports C.jsx and C.jsx imports B.jsx. This creates a catch-22 situation because both files need to be built in order for the other to be built. In other words, B.jsx and C.jsx depend on each other in a circular manner.

This is what the cyclic dependency errors are all about, to avoid this errors for this example, you'll move D component into a separate file and import it into B from that new file that way B.jsx no longer depends on C.jsx
Example
B.jsx

import D from './D'

function B(props) {
    return (
        <div>
            <button>
                {props.text}
            </button>
            <D />
        </div>
    )
}

export default B

D.jsx

export default function D() {
    return (
        <span>more info</span>
    )
}

Our new file dependency structure will now look like this

Alternatively you can move D component into B.jsx

Topological Sort

In this discussion, we have covered the concept of cyclic dependency errors, how to resolve them, and the build order of files in a program. Now, we will delve into one of the algorithms that is used to determine the build order: topological sorting.
To use topological sorting to create a build order, the dependencies between the files must be represented as a directed acyclic graph (DAG). The algorithm then processes the nodes of the graph in a specific order, such that for every edge (A, B => B imports A) from node A to node B, node A appears before node B in the ordering.

Making a map from the previous files example.
A.jsx => [B.jsx, C.jsx]
B.jsx => [D.jsx]
C.jsx => [B.jsx]
D.jsx => []

In graph theory, dependencies are also known as indegrees. In graph theory, an indegree of a vertex in a directed graph is the number of edges that have that vertex as their destination (number of imports a files has).
A.jsx has an indigree of 2
B.jsx has an indigree of 1
C.jsx has an indigree of 1
D.jsx has an indigree of 0

In a topological sort we start with a file that has an indigree of 0 and then we subtract one from the indigrees of all the files that import that file, then we pick another file with indigree of 0 and we repeat the process until we reach the end
So we start with D.jsx then we subtract one from the indigree of B.jsx after subtracting one B.jsx will have an indigree of 0 so we continue with B.jsx. C.jsx imports B.jsx we subtract one from the indigree of C.jsx, A.jsx also imports B.jsx so it's indigree is also subtracted by one. The indigree of C.jsx will become 0 and that of A.jsx will be 1 so we pick C.jsx and since A.jsx imports C.jsx we subtract one from it's indigree and A.jsx will have an indigree of 0.

The final build order is:
D.jsx -> B.jsx -> C.jsx -> A.jsx

A Go implementation of topological sort

package main

import "fmt"

func topologicalSort(graph map[string][]string) []string {
    // File and it's indigree
    indigrees := map[string]int{}
    // Make sure we don't add the same file twice
    visited := map[string]bool{}

    // The Final build order
    buildOrder := []string{}

    // Queue to add files with indigree of 0
    q := []string{}

    // Calculate indigrees
    for file, imports := range graph {
        indigree := len(imports)
        indigrees[file] = len(imports)
        if indigree == 0 {
            q = append(q, file)
        }
    }

    for len(q) > 0 {
        current := q[0]
        q = q[1:]
        buildOrder = append(buildOrder, current)
        visited[current] = true
        // Subtract one from all files that import current
        for file, imports := range graph {
            if !visited[file] {
                for _, val := range imports {
                    if val == current {
                        indigrees[file]--
                        if indigrees[file] == 0 {
                            q = append(q, file)
                        }
                        break
                    }
                }
            }
        }
    }
    return buildOrder
}

func main() {

    // Files processed into a map
    graph := map[string][]string{
        "A.jsx": {"B.jsx", "C.jsx"},
        "B.jsx": {"D.jsx"},
        "C.jsx": {"B.jsx"},
        "D.jsx": {},
    }

    buildOrder := topologicalSort(graph)
    fmt.Println(buildOrder) // => [D.jsx B.jsx C.jsx A.jsx]
}

Conclusion

Hope you've learned something, try implementing topological sort in javaScript. If you have any questions ask them in the comments and I'll answer them.

Go: Arrays and Slices, a deep dive.

Yussif Mohammed — Wed, 04 Jan 2023 11:55:59 +0000

Welcome,

In this article we're going to discuss all there is to know about arrays and slices in Go, we'll go deep talking about their internal structures and why they behave very differently even though they do similar things. We'll be going through Arrays and Slices and their behaviors and difference under 5 topics;

Default or "zero" values
Declaration and Initializing Arrays and Slices
Value parts of Arrays and Slices
Manipulating Arrays and Slices
Potential quirks of slices
Tips for optimizing performance in your code

Things to note

len is a built-in function that returns the number of items in an array of slice
cap is a built-in function that returns the capacity of an array or slice. The capacity of an array is equal to it's length and the capacity of a slice is the maximum number of elements that the slice can hold before it needs to be resized (slice capacity may be greater than the length)
fmt.Println is a function in the fmt package in Go that is used to print a line to the standard output. It takes one or more values as arguments and prints them to the console, separated by spaces and followed by a newline.

Default or "zero" values

In Go, if you declare a variable without explicitly initializing it, the variable is automatically set to the zero value for its type. The zero value is a default value assigned to a variable of a specific type when it is declared but not explicitly initialized. For example, if you declare an int variable like this:



var x int

The value of x will be initialized to 0.
In other languages like Javascript value of an uninitialized variable is undefined

The zero value for each type is as follows:

int: 0
float: 0.0
bool: false
string: "" (empty string)
pointer: nil
struct: all fields are set to the zero value for their respective types

The zero value of an array in Go is an array with all elements set to the zero value for their respective types. For example, if you have an array of integers:



var arr [5]int

The zero value of this array would be:



[0, 0, 0, 0, 0]

Similarly, if you have an array of strings:



var arr [5]string

The zero value of this array would be:



["", "", "", "", ""]

In Go, the zero value of a slice is nil, which is a slice with a length of 0, a capacity of 0, and no underlying array. For example:



var slice []int
fmt.Println(slice == nil) // => true

Declaring and Initializing Arrays

The format for declaring arrays in Go is var name [L]T.
var is a keyword for declaring all kinds of variables in Go
name is the name of the variable, can be anything
L is the length of the array (must be a constant) and T is the type of the array items.
Let's look at some examples



//Array of 5 Intergers
var nums [5]int
fmt.Println(nums) // => [0 0 0 0 0]

//Array of 10 strings
var strs [10]string
fmt.Println(nums) // => [         ]

// Nested arrays
var nested = [3][5]int{
    {1, 2, 3, 4, 5},
    {6, 7, 8, 9, 10},
    {11, 12, 13, 13, 15},
}
fmt.Println(nested) // => [[1 2 3 4 5] [6 7 8 9 10] [11 12 13 13 15]]

Initializing arrays is simply assigning a value to the variable
var name = [L]T{...} where ... represents the array items of type T



//Intializing an array containing 10 intergers
var nums = [10]int{1, 2, 3, 4, 5, 6, 7, 8, 9, 10}
fmt.Println(nums) // => [1 2 3 4 5 6 7 8 9 10]

//Intializing an array containing 10 strings
var strs = [10]string{"one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"}
fmt.Println(strs) // => [one two three four five six seven eight nine ten]

//Nested arrays
var nested = [3][2]int{}

You can also create an array of structs



type Car struct {
    Brand string
    Color string
    Price float32
}

//Array of 5 items of type Car
var arrayOfCars = [5]Car{
    {Brand: "Porsche", Color: "Black", Price: 20_000.00},
    {Brand: "Volvo", Color: "White", Price: 8_000.00},
    {Brand: "Honda", Color: "Blue", Price: 7_000.00},
    {Brand: "Tesla", Color: "Black", Price: 50_000.00},
    {Brand: "Kia", Color: "Red", Price: 5_000.98},
}
fmt.Println(arrayOfCars) // => [{Porsche Black 20000} {Volvo White 8000} {Honda Blue 7000} {Tesla Black 50000} {Kia Red 5000.98}]

To create an array of items with different types in Go, you can use the interface{} type.
An interface in Go is a type that defines a set of methods that a type must implement. Any type that implements all of the methods listed in an interface is said to satisfy the interface and is considered to be of that interface type. The special interface type interface{} has no methods, which means that every type in Go satisfies this interface.



package main

import "fmt"

func main() {
    //Array containing 5 items of different type
    var randomsArray = [5]interface{}{"Hello world!", 35, false, 33.33, 'A'}
    fmt.Println(randomsArray) // => [Hello world! 35 false 33.33 65]

}

Other ways of initializing arrays



import "fmt"

func main() {
    // Using shorthand syntax
    cars := [3]string{"Tesla", "Ferrari", "Benz"}
    fmt.Println(cars) // => [Tesla Ferrari Benz]

    // Using ... inplace of array length
    digits := [...]int{10, 20, 30, 40}
    fmt.Println(digits) // => [10 20 30 40]

    // Using len keyword
    countries := [len(digits)]string{"China", "India", "Kenya"}
    fmt.Println(countries) // => [China India Kenya]
}

Note you can't use the := shorthand syntax in global scope

Declaring and Initializing Slices

To declare a slice we use the format var name []int, the only difference between declaring arrays and slices is that with slices we omit the length.
Examples



import "fmt"

func main() {
    // A slice of intergers
    var intSlice []int
    fmt.Println(intSlice) // => []

    // A slice of intergers
    var stringSlice []string
    fmt.Println(stringSlice) // => []
}

To initialize a slice in Go, you can use the make function. The make function takes three arguments: the type of the slice, the length of the slice, and the capacity of the slice (which is optional). make([]T, len, cap)

For example, to create a slice of integers with a length of 5 and a capacity of 10, you can use the following code:



package main

import "fmt"

func main() {
    // With capacity
    slice1 := make([]int, 5, 10)
    fmt.Println(len(slice1), cap(slice1)) // => 5 10

    // Without capacity
    slice2 := make([]int, 5)
    fmt.Println(len(slice2), cap(slice2)) // => 5 5
}

When you omit the capacity, the capacity is set to the length of the slice.

You also initialize a slice without the make function by immediately assigning value to it



slice := []int{1, 2, 3}
fmt.Println(len(slice), cap(slice)) // => 3 3

Value parts of Arrays and Slices

This is the most important difference between arrays and slices in Go, Arrays have only one part whiles slices have direct and indirect parts (2 parts). What this means is that arrays in Go are fixed-length data structures that consist of a contiguous block of memory for storing elements. Slices are dynamically-sized and reference a contiguous segment of an underlying array.
To understand this properly, let's look at the value parts of the this array and slice example



var arr = [5]int{1,2,3,4,5}
var slice = []int{1,2,3,4,5}

array

'
'
slice

From the above diagrams we can see that an array is a fixed-size collection of elements of the same type, stored in contiguous memory locations. On the other hand, a slice consists of a pointer to an underlying array, a length, and a capacity.

internal structure of a slice direct part



type _slice struct {
    // referencing underlying elements
    elements unsafe.Pointer
    // number of elements
    len int
    // capacity of the slice
        cap int
}

What happens when you copy Arrays and Slices

In Go, underlying value parts are not copied in value assignments only direct values a copied. What this means is that when we copy an array we're making a copy of it's elements (because it's has only a direct part) but when we copy a slice, we are making a copy of it's direct part i.e len, cap and pointer to elements and the indirect part (the actual elements are not copied)

Array copy example



x := [5]int{3, 6, 9, 12, 15}
y := v

In the above code example we've initialized an array x and then we created another variable y and we assigned (copied) the value of x to y.

Here is a diagram representation of what happens

when we make a copy of an array all element are copied into a separate memory block. In the above code example, if we make changes to to x it doesn't affect y and the vice versa, we'll talk more on that later

Slice copy example



x := []int{2,4,6,8,10}
y := x

In the above code example we've initialized a slice x and then we created another slice y and we assigned (copied) the value of x to y.

From the above diagram you can see that the direct parts of x is copied into a separate memory for y (Len, Cap, and Elem pointer) but x and y still share the same underlying parts (array elements). So when you modify an element of x it also affects y since the share the same underlying elements, but x and y can have different lengths and capacity since those are in their own separate memories
more on this later

Manipulating Arrays and Slices

In this section, we will discuss manipulating arrays and slices.

Arrays

Since arrays in Go have a fixed constant length, the only manipulation that can be done on arrays is changing values at specific indexes starting from zero.
first element is 0
second element is 1
third element is 2 and so on.
Examples



package main

import "fmt"

func main() {
    var fruits [6]string // Declare string array with zero values
    fmt.Println(fruits)  // => [       ] (string zero value "")

    // 🍊 change first element
    fruits[0] = "Orange"
    fmt.Println(fruits) // => [Orange      ]

    //🍋 change last element
    fruits[5] = "Lemon"
    fmt.Println(fruits) // => [Orange     Lemon]

    // 🍌🍉🍐🍏change all
    fruits[1] = "Banana"
    fruits[2] = "Watermelon"
    fruits[3] = "Pear"
    fruits[4] = "Apple"
    fmt.Println(fruits) // => [Orange Banana Watermelon Pear Apple Lemon]

    //🍍 Dont' like oranges? change first element again
    fruits[0] = "Pineapple"
    fmt.Println(fruits) // => [Pineapple Banana Watermelon Pear Apple Lemon]

    //Modify array of integers
    evenNumbers := [5]int{2, 4, 6, 8, 10}

    evenNumbers[0] = 12
    fmt.Println(evenNumbers) // => [12 4 6 8 10]

    evenNumbers[3] = 20
    fmt.Println(evenNumbers) // => [12 4 6 20 10]

}

Accessing array values



import "fmt"

func main() {
    nums := [7]int{1, 2, 3, 4, 5, 6, 7}

    // get the first element
    first := nums[0]
    fmt.Println(first) // => 1

    // get third element
    fmt.Println(nums[2]) // => 3

    // last
    fmt.Println(nums[6]) // => 7

    //alternatively
    fmt.Println(nums[len(nums)-1]) // => 7

}

If we try to change element an index greater than or equal to the arrays length the code will won't compile it'll panic with an index out of bound error



package main

import "fmt"

func main() {
    nums := [7]int{1, 2, 3, 4, 5, 6, 7}
    outOfBound := nums[7]
}



invalid argument: array index 7 out of bounds [0:6]

Slices

Slices are a useful data type in Go because they offer a flexible and convenient way to manipulate collections of data. They can be accessed and modified in the same way as arrays, but they also have some specific behaviors that make them more powerful. In the following sections, we will explore some of these behaviors in more detail.

Slice expression

The slice expression signature is s[start:end:cap]
which is used to create a new slice that includes all the elements of the original slice s, starting from the element at index start and up to but not including the element at index end, the cap is the capacity of the newly created sublice and it's optional. If cap is omitted, the capacity of the sub slice is equal to it's length. The length of the sub slice is end - start

Example



package main

import "fmt"

func main() {
    slice := []int{1, 2, 3, 4, 5, 6}
    subSlice := slice[1:4]
    fmt.Println(subSlice)                     // => [2 3 4]
    fmt.Println(len(subSlice), cap(subSlice)) // => 3 3

    subSliceWithCap := slice[1:4:5]
    fmt.Println(subSliceWithCap)                            // => [2 3 4]
    fmt.Println(len(subSliceWithCap), cap(subSliceWithCap)) // => 3 4
}

note the capacity also starts from zero, so if you use 5 as capacity of a slice s calling cap(s) will return 4

If the start index is zero, you can omit it s[:end] similarly if the end index is the end of the array you can omit it like so s[start:]
Examples



package main

import "fmt"

func main() {
    s := []string{"g", "o", " ", "i", "s", " ", "s", "w", "e", "e", "t"}

    // copy from 0 to index 2 (index 2 is exclusive)
    goSubSlice := s[:2]
    fmt.Println(goSubSlice) // => [g o]

    // copy from index 3 to end
    isSweetSubSlice := s[3:]
    fmt.Println(isSweetSubSlice) // => [i s   s w e e t]

        // copy all items
        copySlice := s[:]
        fmt.Println(copySlice) // => [g o  i s   s w e e t]
}

Earlier we discussed slice value parts and how only the direct parts of a slice is copied, so when we create a sub slice what is actually happening ?
Let's use this examples



package main

import "fmt"

func main() {
    n := []int{1, 2, 3, 4, 5, 6, 7, 8, 9, 10}
    n1 := n[:6]
    n2 := n[3:8]
    n3 := n[4:10]

    fmt.Println(n1, len(n1), cap(n1)) // => [1 2 3 4 5 6]  6 10
    fmt.Println(n2, len(n2), cap(n2)) // => [4 5 6 7 8]  5 7
    fmt.Println(n3, len(n3), cap(n3)) // => [5 6 7 8 9 10] 6 6

    // change n1 at index 4 to 15
    n1[4] = 15

    fmt.Println(n)  // => [1 2 3 4 15 6 7 8 9 10]
    fmt.Println(n1) // => [1 2 3 4 15 6]
    fmt.Println(n2) // => [4 15 6 7 8]
    fmt.Println(n3) // => [15 6 7 8 9 10]

}

Notice how when we changed the n1[4] to 15 it affected all the other sub slices including the main slice? that's because they share the same underlying array elements, so anytime we make changes to a sub slice it's affects all other sub slices.
Here is a diagram of the above slice and sub slices to help you understand what's happening

From the above diagram we can see all sub slices share the same underlying array but they span different parts of the underlying array. When we make a change at a particular index of a sub slice, all sub slices the span that index are are also modified.
When you modify the element at index 4 of n3, you are also modifying the element at index 8 of the array (n), because n3 and n share the same underlying array. As a result, the change to n3[4] is also reflected in n. Similarly, any changes made to the elements of n between indices 4 and 9 (inclusive) will also be reflected in n3, because n3 spans those indices.



n3[4] = 18
fmt.Println(n)  // => [1 2 3 4 15 6 7 8 18 10]
fmt.Println(n1) // => [1 2 3 4 15 6]
fmt.Println(n2) // => [4 15 6 7 8]
fmt.Println(n3) // => [15 6 7 8 18 10]

Appending items to a slice

The Go append function allows you to add elements to the end of a slice. It has the following syntax:



func append(s []T, x ...T) []T

s is the slice you want to append to, x is a list of one or more elements of type T to be appended, and the function returns a new slice with the appended elements.

For example:



s := []int{1, 2, 3}
s = append(s, 4, 5, 6)
fmt.Println(s) // => s is now [1, 2, 3, 4, 5, 6]

Note that if the capacity of the underlying array is insufficient to accommodate the additional elements, append will allocate a new, larger array to hold the result. If a new larger array is created after append, that slice does no longer share the same underlying array with other sub slices
Let's use the previous example



package main

import "fmt"

func main() {
    n := []int{1, 2, 3, 4, 5, 6, 7, 8, 9, 10}
    n1 := n[:6]
    n2 := n[3:8]
    n3 := n[4:10]

    fmt.Println(n1, len(n1), cap(n1)) // => [1 2 3 4 5 6]  6 10
    fmt.Println(n2, len(n2), cap(n2)) // => [4 5 6 7 8]  5 7
    fmt.Println(n3, len(n3), cap(n3)) // => [5 6 7 8 9 10] 6 6

}

from the above code n2 has a length of 5 and a capacity of 7 which means we can append two more items without a new array being created and it'll continue so share the same underlying array with the other sub slices
See



n2 = append(n2, 100)
fmt.Println(n)  // => [1 2 3 4 15 6 7 8 100 10]
fmt.Println(n1) // => [1 2 3 4 15 6]
fmt.Println(n2) // => [4 15 6 7 8, 100]
fmt.Println(n3) // => [15 6 7 8 100 10]

n2 = append(n2, 101)
fmt.Println(n)  // => [1 2 3 4 15 6 7 8 100 101]
fmt.Println(n1) // => [1 2 3 4 15 6]
fmt.Println(n2) // => [4 15 6 7 8 100 101]
fmt.Println(n3) // => [15 6 7 8 100 101]

// Check the capacity and length of n2
fmt.Println(cap(n2), len(n2)) // =>  7 7

As we appended more items it was affecting n and n3 but now the n2 slice is full (capacity == length).
Now that capacity of n2 is equal to it's length so appending a new item will cause new array to created for n2 and it will no longer share the same underlying array with the other sub slices



n2 = append(n2, 102)
fmt.Println(n)  // => [1 2 3 4 15 6 7 8 100 101]
fmt.Println(n1) // => [1 2 3 4 15 6]
fmt.Println(n2) // => [4 15 6 7 8 100 101 102]
fmt.Println(n3) // => [15 6 7 8 100 101]

From the above code you can see only n2 was modified and the others weren't affected.

appending multiple items to a slice

example



package main

import "fmt"

func main() {
    s := []int{10, 20, 30, 40, 50, 60}
    s2 := []int{70, 80, 90}

        // Appending slice to slice
    s = append(s, s2...)
    fmt.Println(s) // => [10 20 30 40 50 60 70 80 90]

        // Appending multiple values
    s = append(s, 100, 110, 120)
    fmt.Println(s) // => [10 20 30 40 50 60 70 80 90 100 110 120]
}

Deep value copying of a slice

Deep copying simply means copying the underlying array of a slice instead of the direct part so the destination slice doesn't share the same underlying memory with the source slice.
deep copying using append



package main

import (
    "fmt"
)

func main() {
    slice1 := []int{1, 2, 3, 4, 5, 6}
    slice2 := []int{}
    slice2 = append(slice2, slice1...)

    fmt.Println(slice1) // => [1 2 3 4 5 6]
    fmt.Println(slice2) // => [1 2 3 4 5 6]

    //Modifying slice2 doesn't affect slice1
    slice2[0] = 100
    fmt.Println(slice1) // => [1 2 3 4 5 6]
    fmt.Println(slice2) // => [100 2 3 4 5 6]

    // copying a range of items
    slice3 := []int{}
    slice3 = append(slice3, slice1[3:5]...)
    fmt.Println(slice3) // => [4 5]

    //Again slice3 and slice1 doesn't share underlying array

    slice3[0] = -10
    fmt.Println(slice1) // => [1 2 3 4 5 6]
    fmt.Println(slice3) // => [-10 5]

}

In Go, you can use the copy function to perform a deep copy of a slice. A deep copy creates a new slice with its own, independent copy of the elements of the original slice.

The copy function has the following syntax:



func copy(dst, src []T) int

dst is the destination slice, and src is the source slice. Both slices must have the same element type T. The function returns the number of elements copied, which will be the minimum of the lengths of dst and src.

For example:



package main

import "fmt"

func main() {
    s := []int{1, 2, 3}
    t := make([]int, len(s))
    copy(t, s)
    fmt.Println(t) // => [1, 2, 3], and is a deep copy of s

    // copy a range of items

    t = make([]int, len(s)-1)
    copy(t, s[0:2])
    fmt.Println(t) // => [1, 2], and is a deep copy of s

}

Note that if the length of dst is less than the length of src, only the first len(dst) elements of src will be copied. To make a deep copy of the entire slice, you must ensure that dst has sufficient capacity to hold all of the elements of src.

Potential quirks of slices

As mentioned earlier, a sub slice only copies the direct part of a slice and share the same underlying array. So when we have a slice sBig of size 10 mega bytes and we create a sub slice sTiny of size 3 bytes from sBig, sTiny and sBig will reference the same underlying array. As you might know Go is garbage collected which means it automatically frees up memory when it is not referenced (it can not be reached).
So in the case of sBig and sTiny even if we only need sTiny which is 3 bytes, sBig will continue to be in memory because sTiny references the same underlying array as sBig. To get around this we make a deep copy so that sTiny doesn't share the underlying array as sBig and so it can be garbage collected thereby freeing up memory.
Example



var gopherRegexp = regexp.MustCompile("gopher")

func FindGopher(filename string) []byte {
    //Reading a very huge file  1,000,000,000 bytes (1GB)
    b, _ := ioutil.ReadFile(filename)
    //Taking a just 6 byte sub slice
    gopherSlice := gopherRegexp.Find(b)
    return gopherSlice
}

From the above example we read a very huge file (1GB) and returned a sub slice of it (just 6 bytes), since the gopherSlice still reference the same underlying array as the huge file, which means that 1GB of memory can not be garbage collected even though we are not using it anymore.
If you call the FindGopher function multiples times, you program can eat all the computers memory. To fix this, like I said earlier we make a deep copy so gopherSlice doesn't share the same underlying array as the huge slice
Example



var gopherRegexp = regexp.MustCompile("gopher")

func FindGopher(filename string) []byte {
    //Reading a very huge file  1,000,000,000 bytes (1GB)
    b, _ := ioutil.ReadFile(filename)
    //Taking a just 6 byte sub slice
    gopherSlice := make([]byte, len("gopher"))

    // Make a deep copy
    copy(gopherSlice, gopherRegexp.Find(b...)
    return gopherSlice
}

Now the Go language garbage collector can now free up the ~1GB of memory

Tips for optimizing performance in your code

Like I said earlier the most important difference between arrays and slices in Go is the difference in their value parts this together with Go value copy cost is the reason they differ in performance.

Value copy cost

Value assignments, argument passing, looping using range keyword etc. all involve value copying. The bigger the value size the bigger the value copy cost, copying 10 mega bytes will take longer than copying 10 bytes. And we also learned that only direct parts are copied.
Example



array := [100]int{1,2,3,4,5,6, ..., 100}
slice := []int{1,2,3,4,5,6, ..., 100}

From the above example we've created an array of numbers 1-100 and a slice also of numbers 1-100. When we copy the array all the elements are copied so the value copy cost will be 8 * 100 = 800 bytes (1 int is 8 bytes assuming 64-bit architectures) but when we copy a slice only the direct part is copied (len, cap and elements pointer) so the value copy cost will be 8 + 8 + 8 = 24 bytes. Even though bough slice and array contain 100 elements the value copy cost of the array is way bigger than that of the slice.

From the above scenario the performance concerns only affects arrays and not slices, I'll be focusing on how to use arrays with performance in mind. Also for small array sizes these performances differences are negligible and not worth the effort to make things faster

The only thing here is not using range key word to loop over arrays



package main

import "fmt"

func main() {

    // Don't do this

    arr := [10]int{1, 2, 3, 4, 5, 6, 7, 8, 9, 10}

<span class="c">// arr is copied</span>
<span class="k">for</span> <span class="n">key</span><span class="p">,</span> <span class="n">value</span> <span class="o">:=</span> <span class="k">range</span> <span class="n">arr</span> <span class="p">{</span>
    <span class="n">fmt</span><span class="o">.</span><span class="n">Println</span><span class="p">(</span><span class="n">key</span><span class="p">,</span> <span class="n">value</span><span class="p">)</span>
<span class="p">}</span>

<span class="c">// Do this instead</span>
<span class="k">for</span> <span class="n">i</span> <span class="o">:=</span> <span class="m">0</span><span class="p">;</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="nb">len</span><span class="p">(</span><span class="n">arr</span><span class="p">);</span> <span class="n">i</span><span class="o">++</span> <span class="p">{</span>
    <span class="n">fmt</span><span class="o">.</span><span class="n">Println</span><span class="p">(</span><span class="n">i</span><span class="p">,</span> <span class="n">arr</span><span class="p">[</span><span class="n">i</span><span class="p">])</span>
<span class="p">}</span>



}

Conclusions

If you have any questions, ask them in the comments and I'll be happy to answer them, if you something you want me to
write on write in the comments.

React query - The juicy parts

Yussif Mohammed — Sun, 01 Jan 2023 14:17:41 +0000

So I came across react query when I was building my first startup and I checked it out. On the one of the pages it said if you handled caching, pagination etc, then you're good, so I was like "I've handled all these myself, I'm good" (I was wrong) and I ended up not using react-query, but then I kept seeing people praise react-query so I decided to use it for my second startup and ooh boy, it's so dang good that I'm glad I didn't use it at first because I now appreciate the problems it solves, the time it saves and the overall developer experience is excellent.
In this article, I'll talk about;

Problems react-query solves
Using react-query (focusing on the juicy parts)

Problems React-query solves

In a typical full-stack application there is an HTTP request and response cycle going on. There are different request methods these include; GET, POST, PUT, DELETE, PATCH etc. These methods can be grouped into two groups i.e fetching data from server and updating server data. GET falls under fetching data and the rest fall under updating data, because of this, the foundation of react-query is also fetching and updating data. Just fetching and updating data is easy you can do it with axios or the browser fetch api, but in most applications just fetching and updating data is not enough to give users a good experience and also not optimizing this process will result to excess load on the server and so you want to cache data when necessary, when a user makes a POST request you update already fetched data or invalidate cache if necessary, also if data is too large, you fetch the data in chunks (pages) and so you'll need to handle pagination
in summary, react-query solves these common problems;

querying (parallel queries, dependent queries etc)
caching
pagination
mutations (updating data)
invalidating and updating cached data (managing state)

React-query is a lot and so based on the above common problems I'll be focusing on the juicy parts.

Using react-query (focusing on the juicy parts)

Based on my experience, I found the juicy parts to be;

useQuery
useQueries
useMutation
useQueryClient
useInfiniteQuery

1. useQuery

useQuery is the hook used to make http GET requests.
A basic usage example is

   const { data, isLoading, isError } = useQuery(
        ['users'],
        () => axios.get('https://api.example.com').then((res) => res.data),
        {
            staleTime: 1000,
        }
    );

The useQuery hook takes three arguments, you can also use the object syntax which is basically the same thing.

query key
query function and
options

useQuery(queryKey, queryFn, options)

Query key

The query key is what react-query uses to know which cached data to return when you're making the same request.react-query checks if there is data associated with the cache key and if the data is valid, then it returns that data.
How does react query know if data is stale or invalid?
you tell react-query when cached data should not be used by using the staleTime option and invalidateQuery method of useQueryClient we'll get into those later.
They query key can be a string, an array of strings and an array with nested objects. When a single string is used as query Key, it's converted to an array with that string as the only item.
Examples

//Valid query keys
 queryKey = "followers" //Converted to ["followers"]
 queryKey = ["followers", {user_name:"john_doe"}]
 queryKey = ["followers", 5, {user_name:"jane_doe", verified:true}]

Query Keys are hashed deterministically, which simply means for query keys with nested objects, the order of the keys of those objects don't matter.
These query keys are all equal

 useQuery(['users', { verified, followers_count }], queryFn, options)
 useQuery(['users', { followers_count, verified }], queryFn, options)

However for array items the order is important

// These query keys are not equal
useQuery(["followers", user_name], queryFn, options)
useQuery([user_name, "followers"], queryFn, options)

Query function

The query function is the function that makes the API call and whatever data the function returns is what get assigned to {data} returned by the useQuery hook.
For example:

 const fetchUsers = () => axios.get("https://api.example.com")
 //Here "data" will be axios response
 const {data} = useQuery(["users"], fetchUsers) 
 console.log(data) /*
    {
  // `data` is the response that was provided by the server
  data: {users: ["user1", "user2", "user3", "user4"]},
  status: 200,
  statusText: 'OK',
  headers: {},
  config: {},
  request: {}
}
*/

With this value of data if we want to access the data returned by the server (users) will have to use data.data.users
But when making API mostly is the data returned by the server that we want, so it's good to make your query function return that instead
Example

 const fetchUsers = () => axios.get("https://api.example.com").then(res => res.data)

 //Here "data" will be what server returns
 const {data} = useQuery(["users"], fetchUsers) 
 console.log(data) // {users: ["user1", "user2", "user3", "user4"]

You don't need to catch errors, react-query will do that for you and return it as error in the useQuery return object, more on that later.

Options

Options is the optional third parameter of the userQuery hook.
There are lot of options you can add to the Options object but as usual, we are going to focus on the juicy ones, you can check the react-query documentation for the rest.
The ones we are focusing on include;

staleTime
enabled
retry
onSuccess
onError
onSettledd

staleTime

The time in milliseconds after which data is considered stale. If set to Infinity the cached data will never be stale. It defaults to 0.
When staleTime is 0, react-query will always re-fetch data whenever the component is mounted or when user focuses on window (when they focus after leaving the browser) but when staleTime is set, react-query by default will not re-fetch data until the time set has passed
Example:

  const { data, isLoading } = useQuery(
        ["users"],
        fetchUsers,
        {
            staleTime: 60 * 1000 // 1 minute
        }
    )

react-query by default will only re-fetch data if last fetch time was more than 1 minute ago.

Notice I keep using "by default"? this is because this behavior can be changed, you can tell react-query to re-fetch data on component mount or on window focus regardless of if data is stale or not.
Here is how

    const options = {
        refetchOnMount: "always",
        refetchOnWindowFocus: "always" 
    }

enabled

The enabled option is used to tell react-query whether to fetch the data or not, react-query fetches data only if enabled is true. For example if you have a search feature on your app and you only want to make the API call when the user enters up to three characters. You can do that by using the enabled option.

Example:

  const [query, setQuery] = useState("")

  const { data, isLoading } = useQuery(
        ["search"],
        searchUsers,
        {
            enabled: query.length > 2
        }
    )

retry

retry option simply tell react-query what to do when a query fails.
if set to true react-query will retry infinitely until the query is successful.
if set to false react-query will not retry
alternatively you can set it to a number
eg: if set to 3 ({retry: 3}) react-query will retry 3 times when the query first fails

onSuccess, onError and onSettled

onSuccess is a function that gets called when a query is successful
onError is a function that gets called when a query fails and onSettled is a function that gets called when query is settled (whether it's successful or it failed)

    const [query, setQuery] = useState("")

    const { data, isLoading } = useQuery(
        ["search"],
        searchUsers,
        {
            enabled: query.length > 2,
            onSuccess: (data) => { 
                // Called when data is successfully fetched

            },
            onError: (error) => {
                // Called when query fails

            },
            onSettled: (data, error) => { 
                // Always called regardless of the outcome

            }
        }
    )

useQuery return Object

Went through how to use useQuery, now let's talk about what it returns. the object returned by the useQuery hooks has a lot of properties and will focus on the ...
Here there are

data this is the data returned by the query function if query is successful
error this receives the error as a result of a failed query (network error or error return by server)
isLoading a boolean which is set to true if there's no cached data and no query attempt was finished yet and false otherwise
isError a boolean which is set to true if query fails
isFetching a boolean which is set to true whenever the queryFn is executing, which includes initial loading as well as background refetches and false otherwise.
isSuccess is true if a query is successful

The difference between isLoading and isFetching is that isLoading is only set to true on first fetch (i.e no cache data, or query has not be executed before) but isFetching is set to true on first fetch and when fetching is happening in the background (refetching on mount, refetching on window focus etc)

2. useQueries

useQueries is simply making two or more useQuery at the same time, and it returns and array of useQuery return object for each query
Usage:

const results = useQueries({
  queries: [
    { queryKey: ['user', user_name], queryFn: fetchUser, staleTime: Infinity},
    { queryKey: ['posts', user_name], queryFn: fetchUserPosts, staleTime: Infinity}
  ]
})

In the above example results is an array of useQuery return value for each query inside the queries array

3. useMutation

This hooks is used to make update HTTP requests. these requests make changes to the data on the server as a result it could make already cached data with useQuery in correct, we'll learn how to use useMutation in combination with useQueryClient to make changes to data on the server and invalidate cached data that may be affected by those changes.

Basic Usage:

 const changeName = useMutation(
        (newName) => {
            return axios.put(`/user/name`, {name: newName})
        },
        {
            onSuccess: (data) => {
                const { message, type } = data.data 
            },
            onError: (err) => {
               console.log(err)
            }
        }
    )

That is how you initialize a react-query mutation, But this doesn't make any request yet. calling useMutation returns and object with the following properties

mutate
isLoading
isError
isSuccess
data
error etc.

We'll be focusing mutate because the rest work similar to that of useQuery

mutate is function that when called makes the actual update http request.
with regards to the above example, to make api request to change a user's name will do something like this

function ChangeName() {

    const changeName = useMutation(
        (newName) => {
            return axios.put(`/user/name`, { name: newName })
        },
        {
            onSuccess: (data) => {
              // Success same as that of useQuery
            },
            onError: (err) => {
                // Error same as that of useQuery
            },
        }
    )
    return (
        <form
            onSubmit={(event) => {
                event.preventDefault()
                // Call mutate to invoke the useMutation function
                changeName.mutate(new FormData(event.currentTarget).get('new_name'))
            }}
        >
            <input name="new_name" />
            <button type="submit">Change</button>
        </form>
    )
}

That's mostly all you need to know about useMutation.
In the above code the use just change their name, assuming we've fetched user data with useQuery and used ["user"] as our query key with staleTime of Inifinity this will mean that old name will continue to be showed even though the name has changed. We need a way to tell react-query that the cached data is not longer correct and it should be refetched. we'll discuss that in the next chapter

4. useQueryClient

The useQueryClient hooks returns the QueryClient instance which is passed as a prop to QueryClientProvider which means it gives us access to the heart of react-query and we can do cools things with it. We'll focus on using it to invalidate queries and also update cached data

Invalidating queries

So in the above useMutation example we needed a way to tell react-query that the user data is no longer accurate and so it should refetch. This is how we do that using useQueryClient.

function ChangeName() {
    const queryclient = useQueryClient()
    const changeName = useMutation(
        (newName) => {
            return axios.put(`/user/name`, { name: newName })
        },
        {
            onSuccess: (data) => {
                // This will invalidate the cached user data
                // and the user data will be refetched
                queryclient.invalidateQueries(["user"])
            },
            onError: (err) => {
                // Error same as that of useQuery
            },
        }
    )

    return (
        <form
            onSubmit={(event) => {
                event.preventDefault()
                // Call mutate to invoke the useMutation function
                changeName.mutate(new FormData(event.currentTarget).get('new_name'))
            }}
        >
            <input name="new_name" />
            <button type="submit">Change</button>
        </form>
    )
}

What we just did above is good, but should be we refetch the user data just because the name has changed? NO. Since the change happened on the users browser and we know the new name we could just update the user's cached data with the new name by use setQueryData method of the queryClient you can use that to modify cached data.
Here's how:

function ChangeName() {
    const queryclient = useQueryClient()
    const [newName, setNewName] = useState("")
    const changeName = useMutation(
        (newName) => {
            return axios.put(`/user/name`, { name: newName })
        },
        {
            onSuccess: (data) => {
                // This doesn't cause refetch and 
                // we also have correct data 
                queryclient.setQueryData(["user"], (oldData) => {
                    return { ...oldData, name: new_name }
                })
            },
            onError: (err) => {
                // Error same as that of useQuery
            },
        }
    )

    return (
        <form
            onSubmit={(event) => {
                event.preventDefault()
                // Call mutate to invoke the useMutation function
                changeName.mutate(newName)
            }}
        >
            <input name="new_name" value={newName} onChange={(e) => setNewName(e.target.value)} />
            <button type="submit">Change</button>
        </form>
    )
}

Another important aspect of invalidating queries is using the right query keys.

 const queryclient = useQueryClient()

    // The code below also invalidates queries with the following keys
    // ["user", "followers"]
    // ["user", {user_name}]
    queryclient.invalidateQueries(["user"])

Alternative you can use the exact property to make sure only queries that exactly match the query key get invalidated

  const queryclient = useQueryClient()

    // Does not invalidate queries with the following keys
    // ["user", "followers"]
    // ["user", {user_name}]
    queryclient.invalidateQueries(["user"], { exact: true })

5. useInfiniteQuery

Assuming you're building an application that has comment section and a post has 2000 comments, when a user clicks to see the comments you wouldn't want to send all 2000 comments to the user reason being the user can not read all 2000 comments, you'll be using too much bandwidth and it'll take a long time to load, instead you'll want to fetch the comments in chunks say 1-10 and when user clicks load more or has finished reading those (when the last comment is in view) you then fetch 11-20, then 21-30 and so on. You can do this with axios and useState but react-query made incredibly easy.
Like the useQuery hook, useInfiniteQuery takes queryKey, queryFn and options you can also box queryKey and queryFn in the options object and it's also what the react-query team recommends.
useInfiniteQuery also takes another important option which is getNextPageParam and it also returns an important function called fetchNextPage. These two functions are very important when using useInfiteQuery

Usage:

const fetchComments = ({ pageParam = 0 }) => axios.get(`${BASEURL}/comments/${postID}/${pageParam}`).then(res => res.data)

 const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
  } = useInfiniteQuery(["comments", { postID }], fetchComments,
    {
      // Function that tells react-query the page to fetch next
      getNextPageParam: (lastPage, pages) => {
        if (lastPage.pagination.isEnd) {
          return undefined
        }
        return lastPage.pagination.next
      },
      staleTime: Infinity
    })

Let's break the above code down starting with pageParam
pageParam is cursor or the page we're fetching, for the initial fetch, it's 0 or 1 depending on you handle pages on the backend. So what about the subsequent queries how does react-query now the page it should fetch? that's what the getNextPageParam does, It is a callback function that react-query passes lastPage and pages to and then calls the function whatever the function returns becomes the pageParam for the next query, if it returnsundefined it means we've reached the last page and there are no more pages to fetch, If the getNextPageParam returns undefined, the hasNextPage property of the returned value of useInfiniteQuery is set to false otherwise it's set to true. You can use the hasNextPage value to know whether to show load more button or not.
the lastPage parameter is the data returned by the server after the last fetch and pages is data of all fetches (pages)
do determine what page to fetch next, the server normally returns something like {comments: [], pagination:{next:11, isEnd: false}}
So the get the next pageParam we use lastPage.pagination.next and if the isEnd is true we return undefined to tell react-query that we've reached the end of the comments. Once you have your getNextPageParam function set up all you need to do to fetch next page is to call the fetchNextPage property of the useInfiniteQuery return object. So when user clicks on load more you call fetchNextPage

Example putting it all together

function Comments() {
    const fetchComments = ({ pageParam = 0 }) => axios.get("/post/comments/${postID}/${pageParam}").then(res => res.data)
    const {
        data,
        fetchNextPage,
        hasNextPage,
        isFetching,
    } = useInfiniteQuery(["comments", { postID }], fetchComments,
        {
            getNextPageParam: (lastPage, pages) => {
                if (lastPage.pagination.end) {
                    return undefined
                }
                return lastPage.pagination.next
            },
            staleTime: Infinity
        })
    // Since data returns an array of pages
    // you'll need to combine all the pages into one array
    // so you can map all comments and render on user's screen
    let comments: any[] = []
    if (data?.pages) {
        for (let page of data?.pages) {
            comments = comments.concat(page.comments)
        }
    }

    return (
        <div>
            {
                comments.map((comment) => {
                    return (
                        <Comment
                            key={comment.id}
                            user_name={comment.user_name}
                            comment={comment.comment}
                            date={new Date(comment.created_at)}
                            likes_count={comment.likes_count}
                        />
                    )
                })
            }
            {
                hasNextPage && (
                    <div style={{height:"10px"}}>
                        {!isFetching ?
                            <button onClick={() => fetchNextPage()}>Load more</button>
                            :
                            <Loading />
                        }

                    </div>
                )
            }
        </div>
    )
}

Alternatively, you can use intersectionObserver to automatically load comments so user doesn't have to click on load more making it an infinite scroll.
Example:

function Comments() {
    const fetchComments = ({ pageParam = 0 }) => axios.get("/post/comments/${postID}/${pageParam}").then(res => res.data)
    const {
        data,
        fetchNextPage,
        hasNextPage,
        isFetching,
    } = useInfiniteQuery(["comments", { postID }], fetchComments,
        {
            getNextPageParam: (lastPage, pages) => {
                if (lastPage.pagination.end) {
                    return undefined
                }
                return lastPage.pagination.next
            },
            staleTime: Infinity
        })
    // Since data returns an array of pages
    // you'll need to combine all the pages into one array
    // so you can map all comments and render on user's screen
    let comments: any[] = []
    if (data?.pages) {
        for (let page of data?.pages) {
            comments = comments.concat(page.comments)
        }
    }

    // Load comments automatically use intersectionObserver api
    const loaderRef = useRef(null)
    useEffect(() => {
        const observer = new IntersectionObserver(
            ([entry]) => {
                if (entry.isIntersecting) {
                    fetchNextPage()
                }
            },
            { threshold: 0.5 }
        );

        if (loaderRef.current) {
            observer.observe(loaderRef.current);
        }

        return () => observer.disconnect();
    }, []);

    return (
        <div>
            {
                comments.map((comment) => {
                    return (
                        <Comment
                            key={comment.id}
                            user_name={comment.user_name}
                            comment={comment.comment}
                            date={new Date(comment.created_at)}
                            likes_count={comment.likes_count}
                        />
                    )
                })
            }
            {
                hasNextPage && (
                    <div ref={loaderRef} style={{ height: "10px" }}>
                        {isFetching && <Loading />}
                    </div>
                )
            }
        </div>
    )
}

If you are not familiar with intersectionObserver you can learn more about it here

Conclusion

The topics we've discussed in this blog are the ones I found most useful, If you find yourself trying to do something not covered in this article, there is a high chance react-query allows you to do that, check the react-query documentation and you'll find it, the react-query team thought of everything.