Typewriter effect with vanilla async generators functions

Pasquale Mangialavori — Tue, 26 Jan 2021 14:51:05 +0000

Easy peasy lemon squeezy!

How to pass extra params to your handlers functions with React?

Pasquale Mangialavori — Fri, 24 May 2019 13:42:07 +0000

So you want to render a list and pass extra data to your function with React.

Well, React does not handle this for you like Angular or Vue with some extra syntax in html would do (is this html anymore?).

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

So how to bind data in React efficiently?

Approach 0: Do not try this at home...or office


const things = new Array(32).fill(1).map((el, index) => {
  return {
    index,
    some: 'data'
  };
});

// PLEASE DO NOT DO THIS. But if you want to, who cares ¯\_(ツ)_/¯
class Bad extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello!' };
  }

  handle = el => {
    // WOW a function on every render for every element of the list!!
    alert(JSON.stringify(el));
  };

  render() {
    return (
      <ul>
        {things.map((el, index) => {
          return <li onClick={() => this.handle(el)}>{el.some + el.index</li>;
        })}
      </ul>
    );
  }
}

The problem here is the follow: a function is created on every render for every element of the list!!!

So how to solve this? The perfomance for short lists will be good enogh but this approach does not scale. The list could be dynamic or could come from a service call.

Approach 1: Put data in DOM and get it in handler

const things = new Array(32).fill(1).map((el, index) => {
  return {
    index,
    some: 'data'
  };
});
class Approach1 extends React.Component {
  handleClick = evt => {
    // get item stored in dom
    // PRO: single function
    // CONS: dom payload increase, stringify on every call but this is optional
    const item = JSON.parse(evt.target.dataset.item);
    const index = parseInt(evt.target.dataset.index);
    alert(JSON.stringify(item) + index);
  };
  render() {
    return (
      <ul>
        {things.map((el, index) => {
          return (
            <li
              data-item={JSON.stringify(el)}
              data-index={el.index}
              onClick={this.handleClick}
            >
              {el.some + el.index}
            </li>
          );
        })}
      </ul>
    );
  }
}

This approach is good, but if you have an item model too huge is not optimal.
PRO: single function for every item in list
CONS: dom payload increases if you have huge data model

Approach 2: The best(?) and verbose approach

const things = new Array(32).fill(1).map((el, index) => {
  return {
    index,
    some: 'data'
  };
});
class BestApproach extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello!' };
    this.handlers = new Map();
  }
  getHandler = (el, index) => {
    if (!this.handlers.has(el)) {
      this.handlers.set(el, evt => {
        // do somenthing with the event
        alert(JSON.stringify(el) + index);
      });
    }
    return this.handlers.get(el);
  };

  componentWillMount() {
    this.handlers.clear();
  }
  render() {
    return (
      <ul>
        {things.map((el, index) => (<li onClick={this.getHandler(el, index)}>{el.some + el.index}</li>))}
      </ul>
    );
  }
}

In this way we create a function for every item but only when the first render occurs. The next time we have the cached function back from getHandler.

Approach 3: Event delegation. Probably the best one

const things = new Array(32).fill(1).map((el, index) => {
  return {
    index,
    some: 'data'
  };
});

class MyLi extends React.Component {
  _handler = (evt) => {
    const { item, onPress } = this.props;
    onPress(item, evt);
  }
  render() {
    return <li onClick={this._handler}>{this.props.children}</li>;
  }
}
class BestOfBestApproach extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello!' };
    this.handlers = new Map();
  }
  handler = ({ index, some }) => {
    alert(some);
  };

  render() {
    return (<ul>
      {things.map((el, index) => (<MyLi onPress={this.handler}>{el.some + el.index}</MyLi>))}
    </ul>);
  }
}

Please comment if you have some better solution/approach or if you see some errors.

Bye and happy React coding!

Python-like range iterator in Javascript

Pasquale Mangialavori — Mon, 08 Apr 2019 15:20:55 +0000

For mocking some data for tests or fill some array with fake data or whatever, sometimes I miss the python range iterator in Javascript.

myList = [0,1,2,3]
for i in range(0, len(myList))
    print i

With the not so new by now specific of Javascript we can "generate" our own iterators.

An implementation of range could be this one:

function range(start = 0, end, step = 1) {
  return {
    *[Symbol.iterator]() {
      let newStart = start,
        newEnd = end;
      if (end < start) {
        newStart = end;
        newEnd = start;
      }
      for (let i = newStart; i < newEnd; i += step) {
        yield i;
      }
    }
  };
}

// forward
for (let element of range(0, 10)) {
    console.log({ element });
}

// and backwards
for (let element of range(0, -10)) {
    console.log({ element });
}

We can write an even simpler implementation just writing the generator function.

function* range(start = 0, end, step = 1) {
  let newStart = start,
    newEnd = end;
  if (end < start) {
    newStart = end;
    newEnd = start;
  }
  for (let i = newStart; i < newEnd; i += step) {
    yield i;
  }
}

// forward
for (let element of range(0, 10)) {
    console.log({ element });
}

// and backwards
for (let element of range(0, -10)) {
    console.log({ element });
}

Of course you must use the new for-of in order to iterate over it.

Just remember that the function returns always an iterator under the hood. So we can always easily take the iterator in this way if needed.

const it = range(0, 5)[Symbol.iterator]();
console.log(it.next()) // { value: 0, done: false }
console.log(it.next()) // { value: 1, done: false }