DEV Community: Carrie Pascale👩‍💻

Replace Redux with React Hooks

Carrie Pascale👩‍💻 — Wed, 17 Jun 2020 23:29:48 +0000

In React, you may have come across what's known as the "prop drilling" problem. This is what happens when you pass props down from the top of your component tree to the bottom. It gets tedious! Redux is a state management library commonly used with React which lets us avoid this.

However, the Context API was released in React 16.3:

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Huh? Does this mean I don't need Redux anymore? Let's refactor an app that uses Redux and see what happens.

Setup

We're going to start from this repo. Go ahead and fork & clone to your local machine.

useState & React Context

If you looked at our app and thought, wow, that's a lot of code for a todo-list app...you're right! It is. We don't need to use action creators, dispatch, or connect.

The two Hooks we'll be using are useState and useContext. From the React docs:

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

useState allows you to create and update state within functional components. It takes one argument - the initial state - and returns two values: a state value, which you can name whatever you want, and a function that lets you update this value.

Meaning, something like this...

const [input, setInput] = useState("")

...is equivalent to this (assuming you call this.setState somewhere else):

  constructor(props) {
    super(props);
    this.state = {
      input: "",
    };
  }

You may have heard of useState already, but if Context is new, it basically allows you to use global state across components.

This is important because once you declare your state using useState, you'll need to lift it up to become global state using React Context. You'll do this in your components via a second Hook: useContext.

Are you with me so far?

Context API
useState
useContext

Getting started with React Context

The first step in our journey is to create our Context object. We'll do this using the createContext function provided by React.

In client/context.js, create your Context object.

// Create context object
export const ListContext = createContext();

To make this Context available to all of our components, we have to use a Context provider. According to the React docs, "every Context object comes with a Provider React component that allows consuming components to subscribe to context changes."

This means that whatever we pass as a value to our provider will be passed to components that are descendants of this provider.

client/context.js

import React, { useState, createContext } from "react";

// Create Context object
export const ListContext = createContext();

// Create a provider for components to consume and subscribe to changes
export const ListContextProvider = props => {
  const [tasks, setTasks] = useState([]);

  return (
    <ListContext.Provider value={[tasks, setTasks]}>
      {props.children}
    </ListContext.Provider>
  );
};

Look closely at our provider. It looks like a regular React component, right? If we wrap all of our components in this provider, they will be able to access the global state.

Refactor components

We're going to transform class components into functional components, create local state using useState, and hook into the global state via useContext.

AddItem.js

Let's get Redux out of the way. Delete connect, addItem, mapDispatchToProps, and set your default export to the AddItem component.

Change the class component to a functional component, and delete the constructor. Set the local state to an empty string, like this:

const [input, setInput] = useState("")

Now, refactor handlekey:

  const handleKey = (evt) => {
    if (input === "") return;
    if (evt.key === "Enter") {
      setInput("")
    }
  };

Replace any reference to this.state.input with simply, input. Similarly, any function call involving this.setState should now call setInput.

Next, see if you can log out the value of input to your console from within handleKey.

Congratulations! You've successfully implemented useState. Your AddItem component now has its own local state based on the input. This is awesome. Pats on the back.

Our next task is to tackle useContext. Let's go for it!

Import useContext into the top of your file, and place it below useState.

  const [input, setInput] = useState("");
  const [tasks, setTasks] = useContext(ListContext)

Now, when do you need to make changes to the list of tasks? Probably whenever a user is pressing "Enter," or clicking the "Add Task" button. See if you can figure out where to add this.

setTasks([...tasks, input])

Your code may look something like this:

components/AddItem.js

import React, { useState, useContext } from "react";
import { ListContext } from "../context";

const AddItem = () => {
  const [input, setInput] = useState("");
  const [tasks, setTasks] = useContext(ListContext)

  const handleKey = (evt) => {
    if (input === "") return;
    if (evt.key === "Enter") {
      setTasks([...tasks, input])
      setInput("")
    }
  };

  return (
    <div className="input-group mb-3">
      <input
        type="text"
        className="form-control"
        placeholder="Tasks go here..."
        aria-label="Your items here"
        aria-describedby="button-addon2"
        value={input}
        onChange={(evt) => setInput(evt.target.value)}
        onKeyDown={handleKey}
      />
      <div className="input-group-append">
        <button
          className="btn btn-outline-primary"
          type="button"
          id="button-addon2"
          onClick={() => {
            if (input === "") return;
            setTasks([...tasks, input])
            setInput("")
          }}
        >
          Add Task
        </button>
      </div>
    </div>
  );
};

export default AddItem;

List.js

Let's move on to List.js. Overall, what we need to do is refactor how tasks are being referenced. Instead of our connect function mapping tasks from the global Redux store to List's props, we're going to hook into the context object directly.

Here's how we'll do it:

Connect to the Context Object with useContext
Create a toggleItem function (there are a lot of ways you could do this!)
Change props.items to tasks

Give this one a shot! If you get stuck, here's what I came up with.**

components/List.js

import React, { useContext } from "react";
import { ListContext } from "../context";

const List = () => {
  const [tasks, setTasks] = useContext(ListContext);

  const toggleItem = (idx) => {
    const deleted = tasks[idx];
    const newTasks = tasks.filter((task) => task !== deleted);
    setTasks(newTasks);
  };

  return (
    <ul>
      {tasks.map((item, idx) => {
        return (
          <div key={idx} className="row p-3">
            <div className="col">
              <li>{item}</li>
            </div>
            <div className="col d-flex justify-content-end">
              <button
                onClick={() => toggleItem(idx)}
                type="button"
                className="btn btn-danger btn-sm"
              >
                Remove
              </button>
            </div>
          </div>
        );
      })}
    </ul>
  );
};

export default List;

App.js

At some point during this exercise, you may have noticed this error message:

What is this? What does it mean?!

Well, remember when I said this?

If we wrap all of our components in this Provider, they will be able to access the global state.

We forgot to wrap our app in our provider! Let's go ahead and do it now.

client/components/App.js

import React from "react";
import AddItem from "./AddItem";
import List from "./List";
import { ListContextProvider } from "../context";

const App = () => (
  <ListContextProvider>
  <div className="container p-5">
    <h1 className="display-3">
      A List<small className="text-muted"> with React Hooks</small>
    </h1>
    <AddItem />
    <div className="card scroll shadow-sm p-3 mb-5 bg-white rounded">
      <List />
    </div>
  </div>
  </ListContextProvider>
);

export default App;

We're almost done! Head to client/index.js and remove the Redux provider. Feel free to remove Redux dependencies from your package.json, and to delete store.js.

You should be up and running now! This is awesome.

What did we learn?

React has a native way for you to manage state via Context and Hooks. We learned:

How to create a global Context object + Context provider to wrap components in, with a global state.
useState allows functional components to access state.
useContext lets us hook into our global Context object and make changes to our global state from within components.

5 stars for a job well done. If you got stuck at any point, check out the full solution here.

Happy coding!👋

*You may not always want to use React Context. From the React docs: "If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context." Read more here.

**When refactoring, I combined `Item.js` and `List.js`. You may have found a different solution, and that's okay! I'd love to see what you came up with.

A (Very) Beginner's Guide to WEBPACK

Carrie Pascale👩‍💻 — Tue, 09 Jun 2020 00:19:16 +0000

In the Node environment, we have a "CommonJS" module system that uses module.exports/require to isolate parts of each file (or "module"). Up until ES6, there were no built-in "modules" in browser code.* By default, each script in an HTML document is executed in order and shares one scope.

Enter...Webpack!

From the Webpack 5 docs:

Webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

What does this mean? Let's see Webpack in action by building a small JavaScript program in Node.

Setup

Make a new project with npm and install webpack and webpack-cli.

mkdir hello-webpack && cd hello-webpack
npm init -y
npm install --save-dev webpack webpack-cli

Now, within your root folder, make the directories src and public. The src folder will hold our unprocessed source code, and we'll direct Webpack to output our transpiled code in the public folder. You'll also need to create a file called webpack.config.js - more on that later. Your project should look like this:

hello-webpack/
├── src/
├── public/
├── webpack.config.js
└── package.json

package.json

{
  "name": "hello-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="../src/game.js" defer></script>
  <script src="../src/main.js" defer></script>
  <link rel="stylesheet" href="style.css" />
  <title>Click Me</title>
</head>
<body>
  <button id="button">Click Me!</button>
</body>
</html>

public/style.css

button {
  height: 300px;
  width: 300px;
  font-size: 40px;
  background-color: goldenrod;
  color: white;
  border-radius: 50%;
  cursor: pointer;
}

src/game.js

  let numTimesClicked = 0;

  function win() {
    alert('You win!');
    reset();
  }

  function reset() {
    numTimesClicked = 0;
  }

  function click() {
    numTimesClicked++;
    console.log(`You've been clicked!`);
    if (numTimesClicked === 10) win();
  }

src/main.js

const button = document.getElementById('button');

button.addEventListener('click', function() {
  click();
});

Why do you need Webpack?

From your command line, run open public/index.html. You should see a yellow button. When clicked, the button should log a message to your console. If you click the button 10 times, an alert should pop up letting you know - you've won! Great! We're done!

Just kidding. Take a look at your index.html file. What happens if you don't include the defer keyword in lines 7 and 8? What about if you re-order your JavaScript files?

<!-- remove 'defer' from lines 7 and 8 -->
<!-- re-order 'game.js' and 'main.js' -->
  <script src="../src/main.js"></script>
  <script src="../src/game.js"></script>

Did you see something like this in your console?

Uh-oh.** Remember that thing I said in the beginning about scripts executing in order? The defer attribute tells your browser not to run a specific JavaScript file until after the HTML file is done loading. Without defer, your JavaScript executes as soon as the HTML loads. And if the code in your 'main.js' file runs before the code in 'game.js', your program will try to run your 'click()' function before it's been defined.

Which is why you now have an error in your console.

Bundling modules with Webpack

Now that we know why we need Webpack, let's see it in action.

Webpack is a module bundler. Its purpose is to process your application by tracking down its dependencies, then bundle them all up into one or more files that can be run in the browser. Just like Node apps are universally configured by a package.json, you'll configure Webpack in your webpack.config.js file.

webpack.config.js

Webpack is based around several key components: an entry point, an output location, loaders, and plugins. I'll only focus on entry and output, but you'll definitely use the other two when you configure Webpack for larger projects.

Entry: The JavaScript file where Webpack begins building.

module.exports = {
  entry: './path/to/my/entry/file.js'
};

Output: Name and path for the bundled JavaScript.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js', // the starting point for our program
  output: {
    path: path.resolve(__dirname, 'directory_name'), // the absolute path for the directory where we want the output to be placed
    filename: 'my-first-webpack.bundle.js' // the name of the file that will contain our output - we could name this whatever we want, but bundle.js is typical
  }
};

Your webpack.config.js file may look something like this:

const path = require('path');

module.exports = {
  mode: "development", // could be "production" as well
  entry: './src/main.js', 
  output: {
    path: path.resolve(__dirname, 'public'), 
    filename: 'bundle.js' 
  }
};

NPM scripts

Now that we have our Webpack configuration, we need to add an npm script to our package.json. We can pick any word we want, but "build" is conventional. We can simply use "webpack." If we want Webpack to watch for changes and hot reload files, we can add a "--w" flag at the end. (If we didn't do this step, we would have to run a local copy of Webpack from the command line every time we wanted to run it.)

Your NPM scripts should look like this:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --w"
  },

Now... go ahead and fire her up!

Huh? What's this in my console?

That's your first bundle. The metadata in your console tells you how big your bundle is. Wow! Now that you've done this, you can use ES Modules. This means that as your program gets bigger, you can import and export functions between JavaScript files. Cool!

Bring it to the web

We're almost done. We've configured Webpack to bundle our 'main.js' file and output a 'bundle.js' file in our /public directory.

Now, we can make use of ES Modules in our JavaScript. Remember how the click function was being invoked before it existed to the browser? Now, we can use export and import syntax to export it from game.js and call it within main.js, avoiding this problem altogether. Like this:

game.js

// below the click() function
export default click;

main.js

// at the top of main.js
import click from './game'

Lastly, we need to make a small change to our HTML file. Before we knew about Webpack, index.html loaded two separate JavaScript files. Now, all of the code in those files has been packaged into bundle.js - so we can simply point our script tag to bundle.js.

Go ahead and replace your script tags with a reference to bundle.js:

  <!-- <script src="../src/game.js" defer></script>
  <script src="../src/main.js" defer></script> -->
  <script src="bundle.js" defer></script>

Now, run open public/index.html.

Does your program look and function exactly the same as before? Great! You've done everything right.

Take a peek in your DevTools, and navigate over to the 'Sources' tab. You should be able to click on bundle.js and observe your beautifully bundled JavaScript. Neat!

What did we learn?

Webpack is a bundling tool which packages up all of your JavaScript files into one neat file. We learned:

Webpack bundles your JS code & helps support ES Modules
Two main concepts are entry and output
How to set up webpack.config.js

Great job! You've learned so much, and yet, there is still so much more to learn. From here, you may want to read about a compiler called Babel. Webpack is commonly used with Babel to transpile the latest JavaScript syntax across older browsers. You can also read about how Webpack handles CSS files, code splitting, and other fun things. It's also not the only tool of its kind - you could take a look at grunt, gulp, or browserify.

Happy coding!👋

*The "import" and "export" keywords were introduced in ES6 and there is native browser support for these, though it's not yet universal. To natively load ES modules, you can specify the `type="module"` attribute on your script tags. However, this would result in as many HTTP requests as there are JavaScript files in your HTML file. As your applications grow, you won't want to deal with that, so it's still a good idea to know about bundlers and transpilers.

**From MDN: 'This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.'

JavaScript's Three Dots: Spread Operator vs. Rest Parameters

Carrie Pascale👩‍💻 — Thu, 07 May 2020 20:27:02 +0000

What is the difference between the spread operator and rest parameters, anyway? Aren't they the same thing? I thought so too, but they are pretty much opposites.

TL;DR: When you pass in arguments to a function using the spread operator, you are using rest parameter syntax.

The spread operator allows expressions to be expanded in places where multiple arguments, elements or variables are expected. In both cases below, the spread operator copies every element in the original array, and any elements that come afterward are pushed onto the end. I've also used the spread operator in solving a common interview question called Max Characters.

Copy an Array

Concatenate an Array

Find the Most Frequent Character in a String

Rest Parameters - You Can Use Array Methods!

Rest parameters condense elements into an array. You are using rest parameters if the three dots are being passed in as an argument into a function. In the below example:

Rest parameter syntax allows an unlimited number of arguments to be passed down to the multiply function.
Each time you will return an array with the same number of elements as the number of arguments passed in, minus one.
The values of each element will equal the original values multiplied by the first number.

That's it! Now you know. 👋

DEV Community: Carrie Pascale👩‍💻

Replace Redux with React Hooks

Setup

useState & React Context

Are you with me so far?

Getting started with React Context

client/context.js

Refactor components

AddItem.js

components/AddItem.js

List.js

components/List.js

App.js

client/components/App.js

What did we learn?

Happy coding!👋

*You may not always want to use React Context. From the React docs: "If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context." Read more here.

**When refactoring, I combined Item.js and List.js. You may have found a different solution, and that's okay! I'd love to see what you came up with.

A (Very) Beginner's Guide to WEBPACK

Setup

package.json

public/index.html

public/style.css

src/game.js

src/main.js

Why do you need Webpack?

Bundling modules with Webpack

webpack.config.js

Entry: The JavaScript file where Webpack begins building.

Output: Name and path for the bundled JavaScript.

NPM scripts

Bring it to the web

game.js

main.js

What did we learn?

Happy coding!👋

**From MDN: 'This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.'

JavaScript's Three Dots: Spread Operator vs. Rest Parameters

TL;DR: When you pass in arguments to a function using the spread operator, you are using rest parameter syntax.

Copy an Array

Concatenate an Array

Find the Most Frequent Character in a String

Rest Parameters - You Can Use Array Methods!

**When refactoring, I combined `Item.js` and `List.js`. You may have found a different solution, and that's okay! I'd love to see what you came up with.