DEV Community: Natalie Smith 🏳️‍🌈

How to get started with Redux Toolkit

Natalie Smith 🏳️‍🌈 — Wed, 26 Aug 2020 01:43:52 +0000

What is Redux Toolkit?

To sum it up. It's an easier way to setup and get going with Redux.

We've all been there when it comes to trying to configure a Redux store and in turn, we're left bewildered by the thought it. Or perhaps, it takes too much boilerplate code to get up and running. These are just some of the concerns that Redux Toolkit aims to solve.

The Redux Toolkit package is intended to be the standard way to write Redux logic.

We can't solve every use case, but in the spirit of create-react-app and apollo-boost, we can try to provide some tools that abstract over the setup process and handle the most common use cases, as well as include some useful utilities that will let the user simplify their application code.

Because of that, this package is deliberately limited in scope. It does not address concepts like "reusable encapsulated Redux modules", data caching, folder or file structures, managing entity relationships in the store, and so on. - Redux Toolkit docs

Prerequisite

Basics of Redux and React

Installation

Run the following command to install it

# NPM
npm install --save redux react-redux @reduxjs/toolkit

# Yarn
yarn add --save redux react-redux @reduxjs/toolkit

Redux.org recommends that you structure it in the following ways:

Feature folder
- All files for a feature in a single folder
Ducks pattern
- All Redux logic for a feature in a single file

How to setup the Redux Store

I'm going to create a folder called store and create a file called index.js

src > store > index.js

import { configureStore } from '@reduxjs/toolkit'
import { combineReducers } from 'redux'

const reducer = combineReducers({
 // add reducers
})

const store = configureStore({
  reducer,
})

export default store;

You can also do it this way:

src > index.js

import React from 'react'
import { render } from 'react-dom'

import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'

import App from './App'

import rootReducer from './whereeverthislocated'

import './index.css'

const store = configureStore({ reducer: rootReducer })

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

What are slices?

Redux Toolkit has this thing called slices and essentially, it automatically generates reducers, action types, and action creators. Each slice file lives inside a folder inside of src called slices

The initial state

src > slices > count.js

import { createSlice } from '@reduxjs/toolkit'

export const initialState = {
  count: 0
}

Creating a slice

src > slices > count.js

const countSlice = createSlice({
  name: "count",
  initialState,
  reducers: {
    increment: (state) => {
      state.count = state.count + 1;
    },
    decrement: (state) => {
      state.count = state.count - 1;
    }
  }
});
export const { increment, decrement } = countSlice.actions;
export default countSlice.reducer

Getting Redux state in a React component

Before, we used mapStateToProps with the connect() function to get the state from the store and in Redux Toolkit, that is still a viable option. However, with the addition of Hooks, we can use useDispatch and useSelector

Here's a little bit about each hook:

useDispatch
- Used to "dispatch" actions
useSelector
- Allows you to "select" data from the Redux store state, using a selector function.

App.js

import React from "react";
import "./styles.css";
import { useDispatch, useSelector } from "react-redux";

import { increment, decrement } from "../slices/count";

export default function App() {
  const dispatch = useDispatch();
  const { count } = useSelector((state) => state).countSlice;

  const handleUp = () => {
    dispatch(increment());
  };
  const handleDown = () => {
    dispatch(decrement());
  };
  return (
    <div className="App">
      <h1>My Amazing Counter</h1>

      <h2>Current Count: {count}</h2>
      <button onClick={handleUp}>UP</button>
      <button onClick={handleDown}>DOWN</button>
    </div>
  );
}

For useSelector, you can also predefine what you want in the count.js file. For example:

src > slices > count.js 

// A selector
export const countSelector = (state) => state.count

And then use that in the App.js file,

App.js

const App = () => {
    const { count } = useSelector(countSelector)
    ...
}

Fetching data from an API

This counter example is pretty basic and you're more likely going to be working with an API of some sorts so let's learn how to fetch and save it to the store.

For this, I'm going to be using the Github API. In the slices folder, create a file called repo.js and add the following:

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export const initialState = {
  loading: false,
  hasErrors: false,
  repos: []
};

const reposSlice = createSlice({
  name: "repos",
  initialState,
  reducers: {
    getRepos: (state) => {
      state.loading = true;
    },
    getReposSucess: (state, { payload }) => {
      state.repos = payload;
      state.loading = false;
      state.hasErrors = false;
    },
    getReposFailure: (state) => {
      state.loading = false;
      state.hasErrors = true;
    }
  }
});

export const { getRepos, getReposSucess, getReposFailure } = reposSlice.actions;

// The reducer
export default reposSlice.reducer;

export const fetchRepos = createAsyncThunk(
  "repos/fetchRepos",
  async (thunkAPI) => {
    // Set the loading state to true
    thunkAPI.dispatch(getRepos());

    try {
      const response = await fetch(
        "https://api.github.com/search/repositories?q=react&page=1&per_page=10",
        {
          method: "GET",
          headers: {
            Accept: "application/vnd.github.v3+json"
          }
        }
      );
      const data = await response.json();
      // Set the data 
      thunkAPI.dispatch(getReposSucess(data));
    } catch (error) {
      // Set any erros while trying to fetch
      thunkAPI.dispatch(getReposFailure());
    }
  }
);

A little bit about createAsyncThunk:

A thunk is a function that gets returned by another function
createAsyncThunk will run a callback when dispatched as well as lifecycle actions based on the returned promise

To learn more about createAsyncThunk you can go here

Displaying the repos

In App.js, add the following:

App.js

import React, { useEffect } from "react";
import "./styles.css";
import { useDispatch, useSelector } from "react-redux";
import { fetchRepos } from "../slices/repo";

export default function App() {
  const dispatch = useDispatch();
  const { loading, hasErrors, repos } = useSelector(
    (state) => state
  ).reposSlice;

  useEffect(() => {
    dispatch(fetchRepos());
  }, [dispatch]);

  if (loading) {
    return <p>Loading...</p>;
  } else if (hasErrors) {
    return <p>Oh no error! Display something here.</p>;
  }
  console.log(repos.items);
  return <div className="App">loaded</div>;

Similar to our counter example, we're pretty much doing the same steps except we added in the useEffect hook to fetch our data.

If you want to pass parameters to your API call

App.js
. . .

useEffet(() => {
    dispatch(fetchRepos("react"))
}, [dispatch])

. . .

src > slices > repo.js 

export const fetchRepos = createAsyncThunk(
  "repos/fetchRepos",
  async (paramNameHere, thunkAPI) => {
        console.log(paramNameHere)
    . . .
  }
);

And that's it!

Conclusion

In this post, we learned what Redux Toolkit is, how to setup our store, update our store and even learned how to fetch data and save it to the store as well. Redux is complicated and we're probably going to bump into it again so hopefully Redux Toolkit can help you as it has helped me.

Thanks for reading and if I missed something in this post please comment down below, I'm not an expert so feedback is always appreciated.

Cover Image from: https://miro.medium.com/max/800/1*4sxOPaVNwxrfZ9uxVbUaKg.jpeg

A quick intro to 'this' in JavaScript

Natalie Smith 🏳️‍🌈 — Thu, 23 Jul 2020 23:32:50 +0000

Probably one of the most confusing aspects of JavaScript is finding out what 'this' means. In this post, I will try to go over the basics of the 'this' keyword when used in a method, function, and by itself.

this in a method

A method is a property on an object that is a function. For example:

const greeting = {
  someProp: "🦄", 
  sayHello: function () {
    return "Hello 👋"
  }
}

console.log(greeting.sayHello()) // Hello 👋

sayHello is our method. Another frequently used method is console.log()

When using the 'this' keyword in a method it will be referencing the object owner.

var first = "Jane"
var last = "Fonda"

const person = {
  first: "Sally",
  last: "Sweet",
  fullName: function () {
    return this.first + " " + this.last
  }
}

console.log(person.fullName()) // Sally Sweet

The object owner, in this case, is person so it will be referencing the person object. Even though we have the same variable names out there in the global scope, when using the 'this' keyword in a method it will be referencing properties on the object owner.

this in a function

If you using the this keyword in a function then it will be referencing the window (if you're in the browser)

var lucky = 13; // note: let and const will not work 

function add (num) {
  return this.lucky + num;
}

console.log(add(10)) // 23

    function sum(a, b) {
      console.log(this === window) // true
      this.favNum = 13 // sets 13 in the global obj
      return this.favNum + a + b
    }

    window.favNum // 13
    console.log(sum(10, 10)) // 33

this alone

If you paste in the following, the 'this' keyword will be referencing the global scope which in this case is the window object in the browser.

console.log(this)
console.log(this === window) // true

Conclusion

There is still a lot more to cover for 'this' and by no means does this post go over all the possibilities. It does try to open up the basics and hopefully this was able to help clarify some things about 'this'

Thank you for reading and if I missed something in this post please comment down below, I'm not an expert so feedback is always appreciated.

cover image from https://i.ytimg.com/vi/gvicrj31JOM/maxresdefault.jpg

Optional Chaining in JavaScript: The Introduction

Natalie Smith 🏳️‍🌈 — Sat, 27 Jun 2020 22:02:04 +0000

What is Optional Chaining?

It's a new addition that has been added to ES2020 that allows us to check for object properties to make sure that they're not undefined or null.

What the problem is

Before, to check if an object's property was undefined, we could do something like this:

let nameLength = db.student.name.length

Now, the problem is if db, student, or name is undefined it would throw a type error so let's try it another way.

let nameLength;
if(db && db.student && db.student.name) {
  nameLength = db.student.name.length
}

You could also use the ternary operator

const nameLength =
  (db
    ? (db.student
      ? (db.student.name
        ? db.student.name.length
        : undefined)
      : undefined)
    : undefined);

Okay, the last two examples are less error-prone but it doesn't exactly help readability so let's introduce optional chaining, shall we.

Introducing Optional Chaining

The problems have been presented so let's use the alternative to refactor the first example.

let nameLength = db?.student?.name?.length

It is characterized by the ?. operator and if db, student, or name is undefined then it won't throw an error, instead, nameLength will just be undefined.

Short-circuiting

First and foremost, what is short-circuiting?

Let's take a look at the || logical operator

In JavaScript, it will evaluate from left to right and if it finds a truthy value then it will "short-circuit" and not even look at the second operand.

true || false

Short-circuiting in optional chaining

Since it evaluates from left to right, if we look at the example below

let user = null;
let count = 0;

user?.increase(count++);

console.log(count);  // 0

The operator ?. will immediately "short-circuit" and not check the rest if the user doesn't exist.

Using square brackets [ ]

const optionName = 'optional setting';
const optionLength = db?.student?.preferences?.[optionName].length;

If the option name is undefined then opitionLength will just be undefined and if it is not undefined it will return the value

Function invocation

Similar to accessing the property with a square bracket, you can also invoke a function

const adminOption = db?.student?.validateSomeAwesomeFunction?.().option;

nullish coalescing ?? operator

Optional Chaining can be used with the nullish coalescing ?? operator when you need a default value.

const object = { id: 13, names: { first: 'Natalie', last: 'Smith' }};

const bio = object?.names?.bio ?? 'Tell us about yourself';

As you can see, since the property bio doesn't exist on the object, we just result back to the defaulted value.

Caveats

Don't overuse optional chaining as it only allows for us to check to see if a property value is undefined/null. If we did user?.favorites and the user is not defined then it will throw an error.

Equality Checks

Let's take a look at the following example

if(foo && bar && foo.opitionOne === bar.opitionTwo) {...}

and convert it to 

if(foo?.opitionOne === bar?.opitionTwo) {...}

In the first case without optional chaining, the condition will not be true unless both foo and bar are truthy. However, in the second case, if foo and bar are null, it will be truthy because foo and bar will return undefined, and thus, this can lead to an unexpected equality check and bugs.

Operator precedence

First and foremost, what is the operator precedence?

It determines the order in which operators(|| && ===) are evaluated much like CSS selectors(.class, #id, etc..) whichever one has higher precedence it will be evaluated first.

One thing to note is optional chaining has higher precedence than &&. So when going in to replace the && with optional chaining for an equality check and since && has lower precedence than ?. it might introduce an unexpected outcome especially since ?. will return undefined if it's not there.

Conclusion

Thank you for reading and if I missed something in this post please comment down below, I'm not an expert so feedback is always appreciated.

If you would like to buy me a coffee ☕️ that would be deeply appreciated as I am always tired 😴

cover image from https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/10/21104843/javascript-optional-chaining.jpg

How to set up a React app using Parcel

Natalie Smith 🏳️‍🌈 — Thu, 11 Jun 2020 05:02:43 +0000

What is Parcel?

Parcel is a web app bundler that enables you to get up running with zero configuration
Unlike other bundlers like Webpack, Parcel doesn’t require you to write a lot of code just to get started
It offers blazing fast performance because it utilizes multi core processing where others work off of complex and heavy transforms

Cool features 😎

📍 Error logging => provides highlighted syntax in the code when it encounters an error
🔥 Hot module replacement (HMR) => automatically updates modules as you make changes in develop
✂️ Code splitting => uses the import() syntax to split up your bundle
💻 Automatic transforms => code is automatically transformed using Babel, PostCSS, and PostHTML

🔥 And many more!

Alright, let’s get started! 🏁

Create a new NPM (or with your preferred package manager) app

mkdir my-awesome-app
cd my-awesome-app
npm init

🔥 npm init will ask you a bunch of questions, if don’t want to answer them, tack on the -y at the end: npm init -y

Let’s install the dependencies 📦

React
Babel
Parcel

npm install --save react
npm install --save react-dom
npm install --save-dev @babel/preset-react
npm install --save-dev @babel/preset-env
npm install --save-dev parcel-bundler

Create a .babelrc file

{
 "presets": ["@babel/preset-react"]
}

Create a index.html file

<!DOCTYPE html>
<html>
    <head>
        <title>🍕</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="index.js"></script>
    </body>
</html>

Create a index.js file

import React from "react";
import ReactDOM from "react-dom";

function App () {
 return <h1>This is my amazing app</h1>
}

const mount = document.getElementById("app");
ReactDOM.render(<App />, mount);

Add the entry point to our package.json

"scripts": {
  "start": "parcel index.html",
},

npm start

We’re done! We can view our app on http://localhost:1234

Now go out and build that todo app!

cover image from: https://www.woolha.com/media/2018/09/using-parceljs-bundler-for-building-reactjs-application-1200x627.jpg

How to use Netlify as your CMS for your Gatsby blog

Natalie Smith 🏳️‍🌈 — Sun, 16 Feb 2020 05:24:31 +0000

What is Netlify CMS?

It's an open-source single page application that's written in React that allows you to edit content and data in your Git repo. It interacts with your static site repo API, in our case, Gatsby so that every time you make a change, it gets committed.

Great! So how do I get started?

First, let's open up a new terminal window and create a new site. I will be using the gatsby-theme-blog but feel free to use your own.

shell:
gatsby new YOUR PROJECT NAME https://github.com/gatsbyjs/gatsby-starter-blog-theme

Now cd into your project's directory and install the Gatsby plugin for Netlify CMS and the netlify-cms-app

shell:
npm install --save netlify-cms-app gatsby-plugin-netlify-cms

Now, let's open this up in your favorite text editor.

If you're using the same starter as I am in this tutorial, then your project should be structured like this:

YOUR PROJECT'S NAME
├── content
│   ├── assets  
│   │   └── avatar.png
│   └── posts
│       ├── hello-world.mdx
│       └── my-second-post.mdx
├── src
│   └── gatsby-theme-blog
│       ├── components
│       │   └── bio-content.js
│       └── gatsby-plugin-theme-ui
│           └── colors.js
├── gatsby-config.js
└── package.json

Since we installed a Gatsby plugin, we now need to define it in gatsby-config.js. If that file doesn't exist, then create that file.

gatsby-config.js:

module.exports = {
    plugins: [`gatsby-plugin-netlify-cms`],
}

Now, we're going to want to create a folder called static at the root of our project and then inside of that static folder, create another folder called admin. Finally, create a file called config.yml. Your project should look like this:

YOUR PROJECT'S NAME
├── content
│   ├── assets  
│   │   └── avatar.png
│   └── posts
│       ├── hello-world.mdx
│       └── my-second-post.mdx
├── src
│   └── gatsby-theme-blog
│       ├── components
│       │   └── bio-content.js
│       └── gatsby-plugin-theme-ui
│           └── colors.js
├── static <-------------- HERE
│   └──  admin
│       │   └──  config.yml
├── gatsby-config.js
└── package.json

If you haven't done so, put this project on Github and push your latest commits

Okay, now in your static/admin/config.yml file paste in the following:

backend:
  name: github
  repo: your Github username/ your repo name

media_folder: static/assets
public_folder: /assets

collections:
  - name: blog
    label: Blog
    folder: blog
    create: true
    fields:
      - { name: path, label: Path }
      - { name: date, label: Date, widget: datetime }
      - { name: title, label: Title }
      - { name: body, label: Body, widget: markdown }

Prepare your project for production and head on over to Netlify and create a new site from Git.

Once your site finishes building, follow the instructions from this:
https://docs.netlify.com/visitor-access/oauth-provider-tokens/#setup-and-settings

Make sure to get your key and secret from Github

Head back to Netlify

In your site's setting, scroll down until you see access control and then OAuth click on install provider and choose Github. Enter in your KEY and SECRET

Open your site from Netlify

Type in YOUR SITE URL/admin/

Now you should see this screen:

Click on login with Github and you should now see this screen:

But wait! There's more -- Important

In order for Gatsby to recognize your newly created files in the correct folder, you're going to need to download this Gatsby plugin:

npm install --save gatsby-source-filesystem

and add this to your gatsby-config.js file:

plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `markdown-pages`,
      path: `${__dirname}/content/posts/blog`, <-- your path
    },
  },
]

Make sure to commit your changes!

Back in the CMS:

Now, create a new blog post and click publish. When doing this, it should automatically make a commit to your repo and create a new blog post! Once your site finishes building in Netlify, you should see your new blog post!

Cover Image:
taken from here

Yay! 🎉

Introduction to React Hooks Part 1

Natalie Smith 🏳️‍🌈 — Mon, 03 Feb 2020 00:20:09 +0000

Prerequisites

An understanding of the main concepts of the React library
JavaScript fundamentals (https://www.robinwieruch.de/javascript-fundamentals-react-requirements)

What are React Hooks?

React Hooks allows us to "hook into" React's features like local state-management or lifecycle methods with function components instead of class components.

What problems does it solve?

Okay, so if class components can do the same things that Hooks aims to do - setting state, lifecycle methods, context, etc.. then why switch?

Large class components can be cumbersome

As our application grows in size, it becomes more and more involved in stateful logic and side effects. Often times, it may contain the same logic spread across lifecycle methods or it may contain some unrelated logic.

I think the React docs describe it best by saying:

For example, components might perform some data fetching in
componentDidMount and componentDidUpdate. However, the same
componentDidMount method might also contain some unrelated logic
that sets up event listeners, with cleanup performed in
componentWillUnmount. Mutually related code that changes together
gets split apart, but completely unrelated code ends up combined in a
single method. This makes it too easy to introduce bugs and
inconsistencies.

In many cases it’s not possible to break these components into smaller
ones because the stateful logic is all over the place. It’s also
difficult to test them. This is one of the reasons many people prefer
to combine React with a separate state management library. However,
that often introduces too much abstraction, requires you to jump
between different files and makes reusing components more difficult.

So Hooks allows us to split components into smaller functions based on what pieces are needed like fetching data.

Believe it or not, classes are confusing

Let's say you are just starting out and heard about this amazing library called React. Alright, you decide to jump on the bandwagon and learn about it but you stumble upon the dreaded this keyword and it's just downright confusing, well, at least it was to me. Then, what about the constructor(props) {super(props)} and the fact you have to remember to bind event handlers.

Hooks let you use more of React’s features without classes

Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don’t require you to learn complex functional or reactive programming techniques.

Reuse of stateful logic

Remember render props or higher-order components, it was a way to share the same functionality across multiple components. However, you have to restructure them as you use them, it becomes quite complicated and your code becomes harder to follow as you progress. So this will also cause "wrapper hell" or when your application has a bunch of nested components.

(https://twitter.com/GrexQL/status/1045110734550589441?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1045110734550589441&ref_url=https%3A%2F%2Fwww.polidea.com%2Fblog%2Freact-hooks-vs-wrapper-hell-writing-state-in-a-function-with-ease%2F)

Hooks allows you to reuse stateful logic without changing your component hierarchy

Setting State - Using the State Hook

This will show you how to setState and update the state in react.

First let's import it

import React, { useState } from 'react'

Let's declare a state variable

We're going to have a side by side comparison with Hooks and Class components.

Hooks

const App = () => {
  const [randomNum, setRandomNum] = useState(0);
}

Classes

  class App extends Component {
    constructor(props) {
    super(props);
      this.state = {randomNum: 0} 
    } 
    render() {
      . . .
  }
}

But wait, why is there randomNum and setRandomNum? The first one, randomNum would be your state variable while setRandomNum would be a function that updates your state - randomNum.

Putting set in front of your updater function is a naming convention and you will likely see this everywhere Hooks is used.

So, let's break it down:

const [yourStateName, setYourFunctionUpdaterName] = useState(yourDefaultState);

In our example, I declared a state variable called randomNum and my updater function setRandomNum. I then, gave it a default state of 0.

How do we read the state?

In a class component, it would look something like this:

<h1>{this.state.randomNum}</h1>

In Hooks, it would look something like this:

<h1>{randomNum}</h1>

Since in function components, we don't have this we can't call it like before with this.state. Instead, with Hooks, since it's a variable, we just call it like a variable - {randomNum}.

Okay, how do we update the state?

In a class component, we would have to do something like this:

this.setState({randomNum: newState})

In Hooks, we would do somthing like this:

setRandomNum(newState)

Okay, let's see this in use

Here's an example of setting state in a class component, here we are generating a random number every time the user clicks our button.

<button onClick={() => this.setState({randomNum: Math.floor(Math.random() * 100) + 1})}>Change</button>

Let's recreate this in Hooks

<button onClick={() => setRandomNum(Math.floor(Math.random() * 100) + 1)}>Change</button>

With, hooks, since it's a function we just call it like a function. Of course we don't specify what it needs to update -> setRandomNum because we already inistalized the state attached to the updater function -> const [randomNum, setRandomNum] = useState(0)

And of course, you can have multiple states with different values just like classes:

const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

Using the useEffect hook

The effect hook allows us to perform side effects in function components, so fetching data from an API, setting up a subscription, or changing the DOM in React components are some use cases for this.

Also, useEffect can also be used as a combination of componentDidMount, componentDidUpdate, and componentWillUnmount

So let's take a look at how we go about fetching data in a class component:

componentDidMount() {
  fetch('https://hn.algolia.com/api/v1/search?query=redux')
  .then(response => response.json())
  .then(result => this.setState({data: result.hits});
}

Now, let's take a look at data fetching in Hooks:

First let's import it

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

Now let's see it in action

const App = () => {
const [hits, setHits] = useState([]) 
useEffect(()  =>  {
fetch('https://hn.algolia.com/api/v1/search?query=redux')
  .then(response  =>  response.json())
  .then(result  =>  setHits(result.hits));
});
. . .
}

By using this Hook, you tell React that your component needs to do something after render. You will pass it a function -> useEffect( () => {}) and it will call it later after performing the DOM updates.

It's called inside a component because it enables us to access state variables or any props.

It also runs after each render so by default it runs after the first render and after every update so that brings us onto our next topic.

If you take a look at our code in this example, it fetches the data and sets the state but if you actually try to run this you will find yourself in a terrible loop.

But why?

Remember when I said that it runs after every update? Well, when we set the state when we get the result that causes it to update and therefore the hook runs again and again and again.

And how do I fix this?

We only want to fetch data when the component mounts, so we have to provide an empty array as the second arguement to the effect hook to avoid activating it on component updates.

const App = () => {
    const [hits, setHits] = useState([]) 
    useEffect(()  =>  {
    fetch('https://hn.algolia.com/api/v1/search?query=redux')
      .then(response  =>  response.json())
      .then(result  =>  setHits(result.hits));
    }, [] <-- provide an empty array);
. . .
}

So now if the variable hits changes then the hook will run again. If the array with the variables is empty, the hook doesn't run when updating the component at all, because it doesn't have to watch any variables.

Alright, so there is a lot of other stuff to cover like Custom Hooks, Context, and much more but that should come along in part 2. So stay tuned!

Before you go, keep in mind these rules 🎉

Important Rules for Hooks

Only Call Hooks at the Top Level

Meaning, don't call them in loops, conditionals, or nested functions
By following this rule, you ensure:

That they are called in the same order each time a component renders
It allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls

Only Call Hooks from React Functions

Don’t call Hooks from regular JavaScript functions
But you can:

Call Hooks from React function components.
Call Hooks from custom Hooks ( This will be covered in Part 2)

ESLint Plugin for enforcing these rules

How to install

npm install eslint-plugin-react-hooks --save-dev

// Your ESLint configuration
{
  "plugins": [
    // ...
    "react-hooks" 
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  }
}

If you're using Create React App, this is already included! 🥳

Cover Image: https://miro.medium.com/max/3000/1*Ra-gkqfPqbWVhgP3tR-0Cg.png