Forem: Alex Wiles

Let's implement the reduce method by refactoring a for-loop

Alex Wiles — Wed, 03 Jun 2020 02:38:50 +0000

The goal of this post is to show you how the reduce method works and can be implemented by slowly refactoring a simple for loop. Each step will modify one part of the code and at the end we will have an implementation of the reduce method.

originally published on uncomma.com

From a for-loop to reduce

Let's start with a simple script to sum an array of numbers. We define an array, a sum, then loop over each element, adding to the sum. At the end of the script, we print the sum to view the result.

const arr = [1, 2, 3, 4, 5];
var sum = 0;

for (let n of arr) {
  sum += n;
}

console.log(sum);
// 15

We can make this more general and create a sum function that takes an array as an argument and returns the sum of the elements.

This function looks a lot like the script above. It sets the initial state to zero and loops over the array, adding each element to the state. After the loop, the state is returned. We can use this function on any array of numbers now.

const sum = (arr) => {
  var state = 0;
  for (let n of arr) {
    state = state + n;
  }
  return state;
};

sum([1, 2, 3, 4, 5]);
// 15

Now we will start generalizing even more, working our way towards reduce. Rather than hard coding how the state is updated, lets move it into a function. In this next script, "state + n" is replaced with a function call.

var addToSum = (s, val) => s + val;

const sum = (arr) => {
  var state = 0;
  for (let n of arr) {
    state = addToSum(state, n);
  }
  return state;
};

sum([1, 2, 3, 4, 5]);
// 15

And we keep generalizing. Let's replace addToSum with an argument function. Now our sum function takes a second argument: adderFn. Now, when we call sum, we pass in a function that adds the next number (n) to the state (s).

const sum = (arr, adderFn) => {
  var state = 0;
  for (let n of arr) {
    state = adderFn(state, n);
  }
  return state;
};

sum([1, 2, 3, 4, 5], (s, n) => s + n);
// 15

We have one more hardcoded value that we can remove from the function: the initial state. Let's just pass state as an argument.

const sum = (arr, adderFn, state) => {
  for (let n of arr) {
    state = adderFn(state, n);
  }
  return state;
};

sum([1, 2, 3, 4, 5], (sum, n) => sum + n, 0);
// 15

Now we have a function that takes an array, a function, and an initial state. It loops over the array, updating the state by passing the current state and current element to the argument function. This is reduce!

Let's update some variables names and remove any reference to our sum function.

const reduce = (arr, reduceFn, state) => {
  for (let el of arr) {
    state = reduceFn(state, el);
  }
  return state;
};

reduce([1, 2, 3, 4, 5], (s, n) => s + n, 0);

We can define this function on the array prototype, so it looks like the native reduce. The main difference is we no longer take an array argument.

Array.prototype.reduce = function(reduceFn, state) {
  for (let el of this) {
    state = reduceFn(state, el);
  }
  return state;
};

[1, 2, 3, 4, 5].reduce((s, n) => s + n, 0);

And that's it. We just refactored a simple for loop into the reduce function.

Check out some reduce examples here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce#Examples

If you like this style of post, sign up for the newsletter here or know on twitter @xwle

Debouncing with React hooks

Alex Wiles — Sun, 03 May 2020 03:36:45 +0000

How to use React hooks to debounce an onChange event.

tl;dr

  useEffect(() => {
    const timeout = setTimeout(() => someFunction(), 400);
    return () => { clearTimeout(timeout); };
  }, [dependency]);

Use setTimeout in the effect and clear it before the next effect call. This will only call someFunction() when the dependency array has not changed for 400 ms. This pattern is ideal for making network requests or calling other expensive functions.

Refactoring a laggy input

The Username component has two pieces of state: username and valid. On every input change, we set the username to the new value and we calculate and set the validity.

This works, but it is a bad user experience because the input feels very laggy. The validation takes a long time and keyboard events do not feel instant.

Here, I am burning cycles with a big for loop, but you can imagine making a network request in its place.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const validate = value => {
  // expensive validation
  for (var x = 1; x < 500000000; x++) {
    value.length < x;
  }

  if (value.length > 5) {
    return "max length is 5";
  }

  if (value.length === 0) {
    return "please select your username";
  }

  return "looks good";
};


const Username = () => {
  const [username, setUsername] = useState("");
  const [valid, setValid] = useState(undefined);

  return (
    <div>
      <div>Username</div>
      <input
        type="text"
        value={username}
        onChange={e => {
          const value = e.target.value;
          setUsername(value);
          setValid(validate(value));
        }}
      />
      <div>{valid}</div>
    </div>
  );
};

ReactDOM.render(<Username />, document.getElementById("main"));

Refactoring away the lagginess

We still want to check if a username is valid, but we want to make it a good experience for the user. The goal is to validate the user input only after there has been a pause in typing. We don't care about validating the input while the user is typing, we only want to validate it when they have paused for a moment.

Remove the setValid call from the onChange event.
We only want to call setValid after the user stops typing for a set amount of time. Now, onChange only updates the username. The input will not feel laggy anymore, but the validation is not triggered.

The useEffect hook
We will use the "useEffect" hook to calculate and set the validation. The useEffect hook takes two arguments, the effect function and a dependency array. The effect fires when a value in the dependency array changes. In our case, we want to fire the callback when the username changes, so we put it in the dependency array.

Still laggy

  useEffect(() => {
    setValid(validate(username));
  }, [username]);

The effect triggers whenever the username changes. We can't check and set the validity in the effect because we would face the same problem as before: a laggy input. So, we need a way to only call the validation function after the username has not changed for a set amount of time.

Using setTimeout
setTimeout takes two arguments: a callback and a number of milliseconds. In this example, we want to check and set the validity in the callback. I chose 400 milliseconds for the timeout. Now, everytime the username changes a timeout is set and the validation triggers.

Still not good:

  useEffect(() => {
    const timer = setTimeout(() => {
      setValid(validate(username));
    }, 400);
  }, [username]);

Still, this is not ideal. Every key press will create a timeout and a validation is called for each keypress, just delayed a bit.

useEffect cleanup
useEffect provides a way to cleanup effects. If you return a function from an effect, then it will trigger before the next effect. This is exactly what we need. We can return a function that clears the old timeout before creating a new one.

  useEffect(() => {
    setValid("");
    const timer = setTimeout(() => {
      setValid(validate(username));
    }, 400);

    return () => {
      clearTimeout(timer);
    };
  }, [username]);

This is how you call the validation function only after the username has not changed for 400ms.

The full code

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const validate = value => {
  // expensive validation
  for (var x = 1; x < 500000000; x++) {
    value.length < x;
  }

  if (value.length > 5) {
    return "max length is 5";
  }

  if (value.length === 0) {
    return "please select your username";
  }

  return "looks good";
};

const Username = () => {
  const [username, setUsername] = useState("");
  const [valid, setValid] = useState(undefined);

  useEffect(() => {
    // clear the valid message so nothing is displayed while typing
    setValid("");

    // create the timer
    const timer = setTimeout(() => {
      setValid(validate(username));
    }, 400);

    // return a cleanup function that clears the timeout
    return () => {
      clearTimeout(timer);
    };
  }, [username]);

  return (
    <div>
      <div>Username</div>
      <input
        type="text"
        value={username}
        onChange={e => {
          const value = e.target.value;
          setUsername(value);
        }}
      />
      <div>{valid}</div>
    </div>
  );
};

Rendering a React component in Rails without a library

Alex Wiles — Sat, 02 May 2020 06:16:58 +0000

I have a Rails application where I render React components on a standard Rails view. Instead of pulling in a 3rd party library to manage the rendering, I wrote a few simple functions myself.

How it works

In the Rails view, I create an element that includes all the data needed to render the component. Then a Javascript function finds these special nodes in the page, and mounts the components.

Rendering the special element in a Rails View

The rendered HTML will look like this:

<div class="react-MyReactComponent" data="{"message": "Hello, World."}"></div>

The class name is how the Javascript mounting function will find the elements. The data property holds the component props as a JSON object.

In my application helper, I created a simple function to generate these elements.

module ApplicationHelper
  def react_component(component_name, data={})
    json_data = data.to_json
    class_name = "react-#{component_name}"
    content_tag(:div, nil,class: class_name, data: json_data).html_safe
  end
end

The function takes two arguments: the component name and the data object. The data object is a plain Ruby hash that is serialized to JSON and I prefix the component name with "react-". Then I just return a div tag with that class name and the data attribute.

Calling it in a slim view looks like this:

div
  h1 Hello, I have a message for you
  = react_component "MessageDisplay", {message: "hello, world!"}

Writing the Javascript

I am not going to cover setting up the javascript build system in this post, but there are a lot of resources that document webpacker.

The simple React component we will use:
const MessageDisplay = ({ message }) => (
  <div>{message}</div>
);

Now we write the mounting function:

export const mountComponent = (component, componentName) => {
  const nodes = Array.from(
    doc.getElementsByClassName(`react-${componentName}`)
  );

  nodes.forEach((node) => {
    const data = node.getAttribute("data");
    const props = data && data.length > 2 ? JSON.parse(data) : {};
    const el = React.createElement(component, { ...props }, []);
    node.innerHTML = ''
    return ReactDOM.render(el, node);
  });
};

The mountComponent function takes two arguments: component and componentName. Component is the actual React component function and the component name is a stringified version. We need both because Javascript build systems change component names during transpilation, so we need a static string name to associate with it.

First, we find all elements on the page that match the "react-" class. This is how we connect the react_component view funciton with the Javascript.

Then, we iterate through the nodes, parse the data props as a JSON object, create a new element with the parsed data props, clear the nodes children, and render it on our target node. I clear the children to cover any edge cases where the javascript is fired but the page did not do a full reload. This is important if you are using turbolinks (more on that late).

Calling this Javascript function is as simple as:

mountComponent(MessageDisplay, "MessageDisplay")

When to call mountComponent

You will want to call it on some javascript event. I use turbolinks, so I am subscribed to the "turbolinks:load" event.

document.addEventListener("turbolinks:load", () => {
  mountComponent(MessageDisplay, "MessageDisplay");
  mountComponent(AnotherComponent, "AnotherComponent");
  mountComponent(AThirdOne, "AThirdOne");
});

You may need to listen to different event like window load.

Summary

It is actually quite simple to render React components without another library. The one thing to watch out for is making sure changes to your components props are reflected in your Rails code as well. I created a library class with pure functions to create the component prop hashes. It is very convenient having that logic all in one place and you can write tests against it. It will become very fragile if you create the prop hashes in the views like in this example.

That is all. Happy coding!

originally published on Uncomma