Magic number theo nghĩa đen là một con số ma thuật. Là khái niệm mà  develop dùng để gọi những con số trong code mà chúng chỉ tồn tại ở đó nhưng không được define một cách rõ ràng rằng chúng biểu diễn cho một giá trị nào đó.

![img](https://gateway.tuanndl.com/uploads/1657377916835-giphy.gif)

Ví dụ: 

```javascript
function validateMp3(file) {
  return new Promise((resolve) => {
    var objectURL = URL.createObjectURL(file);
    var mySound = new Audio([objectURL]);
    mySound.addEventListener(
      "canplaythrough",
      () => {
        URL.revokeObjectURL(objectURL);
        resolve(mySound.duration <= 15);
      },
      false,
    );
  });  
}
```

Nhìn vào đoạn code trên bạn thấy rằng function đang trả về số giây của file mp3 phải nhỏ hơn hoặc bằng 15. Nghĩa là thời lượng tối đa của 1 file mp3 cao nhất là 15s. OK cũng khá dễ hiểu. Cùng xem tiếp 1 vi dụ khác với mình.

```javascript
for (let i = 1; i < 52; i++) {
    ...
}
```

Lúc này người đọc code sẽ không rõ tại sao vòng lặp này chỉ chạy đến 52 mà không phải 1 con số nào khác 🙃.

![img](https://gateway.tuanndl.com/uploads/1657378025010-ech_gun.jpeg)

Để giải quyết vấn đề này chúng ta nên đặt 1 hằng số với 1 cái tên có nghĩa:

```javascript
const TOTAL_BAI_TIEN_LEN = 52;
for (let i = 0; i < TOTAL_BAI_TIEN_LEN; i++) {
    ...
}
```

Nhìn vào code bạn sẽ hiểu ngay rằng vòng lặp này đang lặp qua 52 lá bài trong 1 bộ bài chơi tiến lên. Quay lại ví dụ 1 nếu bạn đặt 1 hằng số  

```javascript
const MAX_DURATION = 15;
function validateMp3(file) {
  return new Promise((resolve) => {
    var objectURL = URL.createObjectURL(file);
    var mySound = new Audio([objectURL]);
    mySound.addEventListener(
      "canplaythrough",
      () => {
        URL.revokeObjectURL(objectURL);
        resolve(mySound.duration <= MAX_DURATION);
      },
      false,
    );
  });  
}
```

Thì khi bạn đọc code và check lại đoạn code mà bạn đã code vài tháng / năm trước thì  nhìn  code sẽ dễ hiểu hơn nhiều. Thay vì bạn phải thốt lên rằng còn số 15 này có nghĩa là gì , ở đâu ta có nó 😂

Tóm lại, khi có 1 magic number trong đoạn code xử lý của bạn, bạn nên define 1 hằng số với 1 cái tên dễ hiểu. Để lead của bạn đở phải comment 😂

Clean Code phần 1: Magic Number

### Git rebase là gì ?

![image info](https://gateway.tuanndl.com/uploads/1649865145596-frame4.png)
Git Rebase là một chức năng được dùng khi gắn nhánh đã hoàn thành công việc vào nhánh gốc . Về mặt nội dung thì là việc điều chỉnh nhánh công việc gắn vào với nhánh gốc nên các commit sẽ được đăng kí theo thứ tự gắn vào . Chính vì thế sẽ có đặc trưng là dễ nhìn hơn sau khi xác nhận commit .

Tác dụng chính của chức năng này là lưu giữ lịch sử làm việc của dự án một cách tuyến tính.

### Vào vấn đề chính
Bình thường bạn code 1 cái task. Đầu tiên là tách branch code và commit nếu nhiều hơn 2 lần thì muốn PR yêu cầu merge vào nhánh chính thì bạn phải rebase. Ví dụ  bạn muốn rebase vào nhánh master.

Đầu tiên pull nhánh master về để lấy các thay đổi mới nhất của nó .

```sh
git checkout master
git pull
```

Rồi checkout về nhánh hiện tại đang làm và rebase .

```sh
git rebase -i master
```

Nếu rebase dính confilict thì bạn fix confilict và tiếp tục rebase với câu lệnh sau.

```sh
git add .
git rebase --continue
```
Bỏ qua bước trên nếu không bị confilict.
Khi rebase được báo successfully thì bạn push -f lên: 

```sh
git push origin -f
```

Xong ez game 😌. 

### Đơn giản hoá vấn đề

Nhưng mà khi bạn có nhiều commit trong branch của mình thì việc confilict giữa các commit  của bạn là khá phổ biến . Hoặc bạn  có 2 commit  nhưng mà cũng phải thực hiện  các thao tác trên. Thế thì có cách nào đơn giản hoá việc rebase này không. Xin thưa là có  😆.

Khi bạn commit đến lần thứ 2 trên 1 branch thì nên dùng lệnh này để commit .
```sh
git add .
git commit --amend
```

Nó sẽ hiển thị message của commit thứ 1. Sửa message commit  phù hợp rồi wq!  để lưu lại.  Tiếp tục

```sh
git push origin -f
```

Lúc này trên branch của bạn chỉ có 1 commit duy nhất. Mà chỉ có 1 commit duy nhất thì không  cần phải rebase. Khoẻ đở tốn công 😋

Mẹo sử dụng Git rebase hiệu quả

Git reflog là gì? Nhiều khi bạn lỡ tay reset hard, xóa commit, xóa branch, … . Bạn tá hoả lên và rồi Code lại từ đầu =)). Không sao cả việc code lại sẽ giúp bạn càng nhuần nhuyễn việc mình đang làm. Còn nếu bạn làm biếng như mình thì hãy dùng git reflog.

>`Reflog` là một công cụ mạnh mẽ trong git, nó như cỗ máy thời gian giúp ta khôi phục bất cứ hành động nào và nhảy về vị trí đó bằng commit hash.

## Xem reflog để khôi phục lại 1 commit bất kì
```sh
$ git reflog
0272a7e HEAD@{1}: reset: moving to HEAD~
4e33eb9 HEAD@{2}: commit: Add common components
0232a9e HEAD@{3}: commit: Add i18n config
4d3afe9 HEAD@{8}: commit: Add storybook
c1fe83d HEAD@{9}: commit: Add alias TS
b5d314a HEAD@{10}: commit: Add common utils
c528ae5 HEAD@{11}: pull: Fast-forward
...
```
`0232a9e` hoặc `HEAD@{3}` là id của `Add i18n config`. Để khôi phục lại commit đó

```sh
git reset --hard 0232a9e
HEAD is now at 0232a9e Add i18n config
```

## Lỡ tay reset —hard

Tương tự như trên, ta xem lại reflog
```sh
$ git reflog
0272a7e HEAD@{1}: reset: moving to HEAD~
4e33eb9 HEAD@{2}: commit: Add common components
0232a9e HEAD@{3}: commit: Add i18n config
4d3afe9 HEAD@{8}: commit: Add storybook
c1fe83d HEAD@{9}: commit: Add alias TS
b5d314a HEAD@{10}: commit: Add common utils
c528ae5 HEAD@{11}: pull: Fast-forward
...
```

`0272a7e` là commit reset HEAD, `4e33eb9` là commit bị mất bạn cần sẽ nhảy đến. Để khôi phục
```sh
git reset --hard 4e33eb9
HEAD is now at 4e33eb9 Add common components
```
## Lỡ tay xóa branch
Trong trường hợp bạn lỡ xóa branch bằng branch -D thì cũng có thể dễ dàng khôi phục như trường hợp mất commit.
```sh
$ git br -D test-ref-log
Deleted branch test-ref-log (was `0272a7e`).
```
Ta xem lại lịch sử bằng reflog
```sh
$ git reflog
c1fe83d HEAD@{0}: checkout: moving from test-ref-log to master
0272a7e HEAD@{1}: reset: moving to 0272a7e
```
Trạng thái muốn quay lại là `0272a7e`, vì thế

```sh
$ git branch develop 0272a7e
$ git checkout develop
```
Và chúng ta sẽ quay lại branch vừa bị xóa lúc nãy.

Khôi phục Code bằng Git reflog

Git stash là gì? Hiểu và sử dụng hiệu quả git  stash là điều cần biết trong quá trình làm việc của một lập trình viên.  

## Git stash
`Git stash` được sử dụng khi muốn lưu lại các thay đổi chưa commit, thường rất hữu dụng khi bạn muốn đổi sang 1 branch khác mà lại đang làm dở ở branch hiện tại.

Muốn lưu toàn bộ nội dung công việc đang làm dở, bạn có thể sử dụng git stash như sau
```sh
$ git stash save # hoặc  chỉ cần "git stash"
```
Khi này branch đã trở nên “sạch sẽ” và git status sẽ cho thấy bạn có thể chuyển sang branch tuỳ thích. Bạn có thể git stash bao nhiêu lần tuỳ thích và mỗi lần đó git sẽ lưu toàn bộ lần thay đổi đó như 1 phần tử trong 1 stack.

Hiển thị các danh sách các lần lưu thay đổi bằng câu lệnh
```sh
$ git stash list
stash@{0}: WIP on : 
stash@{1}: WIP on : 
stash@{2}: WIP on : 
```
Nếu muốn xem cả nội dung của từng thay đổi thì thêm option -p
```sh
$ git stash list -p
```
hoặc xem nội dung cụ thể hơn nữa của lần thay đổi thứ 1:
```sh
$ git stash show stash@{1}
```
Khi muốn apply lại thay đổi từ stash lần 1 bạn có thể
```sh
$ git stash apply stash@{1}
```
## Đổ các thay đổi vào branch hiện tại
Khi bạn muốn lấy những thay đổi ở 1 stash vào branch hiện tại thì bạn chỉ cần 
```sh
$ git stash apply stash@{1}
```
Bạn nên kiểm tra list stash để biết chính xác cái bạn muốn apply vào branch hiện tại là stash số mấy nha `stash@{1}` 
## Xoá các thay đổi trong stash
```sh
$ git stash drop stash@{1}
```
hoặc
```sh
$ git stash pop stash@{1}
```
Thậm chí nếu muốn xoá toàn bộ stack thì có thể dùng clear
```sh
$ git stash clear
```

Trên đây là toàn bộ các câu lệnh và cách sử dụng về Git stash . Bài tiếp theo mình sẽ chia sẽ cách lấy code khi bạn bị mất code nha.

Mẹo xử dụng git hiệu quả với Git stash

Hôm nay mình sẽ chia sẽ cách mà mình config ssh key với nhiều account git trên một máy  tính.  Với mình cần config 2 account git: một là của công ty mình đang làm và 2 là account cá nhân của mình. Tương tự bạn cũng có  thể config cho 3 hoặc nhiều hơn ở trên một máy tính. 

## Đi đến thư mục tạo key
```sh
cd ~/.ssh
```
## Tạo ssh key 
```sh
ssh-keygen -t rsa -C "github-email-address"
```
Khi màn hình hiện Enter file in which to save the key (/home/<user>/.ssh/id_rsa): Đặt tên để lưu cái key thì bạn nên đặt id_rsa_[name], ví dụ mình cần 2 ssh key thì mình sẽ nhập là id_rsa_tuan và  lần tạo sau  là id_rsa_work

Kiểm tra xem id_rsa_tuan và id_rsa_work đã được sinh ra chưa.
```sh
ls
```

Danh sách các file đã được sinh ra:
```sh
id_rsa_tuan id_rsa_tuan.pub id_rsa_work id_rsa_work.pub
```
Trong này thì những file có đuôi .pub là key public. Ví dụ mình tạo ssh key với name là id_rsa_tuan thì id_rsa_tuan là key private còn id_rsa_tuan.pub là key public sẽ dùng để lưu trên github.com
## Cài đặt ssh key trên github
Lấy id_rsa của email mới bạn vừa tạo. Ví dụ mình muốn copy  id_rsa_tuan.pub
```sh
cat id_rsa_tuan.pub
```
Sau đó bạn copy key hiển thị trên terminal nhập vào ssh-key cuả tài khoản git công việc tại https://github.com/settings/keys

## Cài đặt Github Host
Ở đây mình dùng Vim để chỉnh sửa file config
```sh
vi ~/.ssh/config
```
Sau đó bạn cần sửa file config như sau. Ở đây thì mình cần setup 2 account .
```sh
# Tài khoản git cá nhân vẫn dùng của bạn
Host tuan.github.com # config này sẽ dùng để xử lý xác định khi cấu hình remote
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_tuan  # id_rsa_tuan mà chúng ta vừa tạo
    PreferredAuthentications publickey
# Tài khoản công việc
Host work.github.com 
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_work 
    PreferredAuthentications publickey
```

Trong phần config này bạn cần để ý 2 dòng cho mỗi account:
* Host tuan.github.com: Bạn cần đặt tên định dạng  [name].github.com
* IdentityFile ~/.ssh/id_rsa_tuan: Lấy private tương ứng 

## Sau đó chạy lệnh sau để áp dụng config mới
```sh
ssh-keygen -R github.com
```

## Cách sử dụng
### Khi muốn clone một repo mới trên github. 

Ví dụ dùng ssh key của "id_rsa_tuan"
```sh
git clone git@tuan.github.com:tuanndl/sample_react.git
```
Ví dụ dùng ssh key của "id_rsa_work"
```sh
git clone git@work.github.com:tuanndl/sample_react.git
```

### Add remote với repo mới:

Ví dụ dùng ssh key của "id_rsa_tuan"
```sh
git remote add origin git@tuan.github.com:tuanndl/sample_ruby.git
```
Ví dụ dùng ssh key của "id_rsa_work"
```sh
git remote add origin git@work.github.com:tuanndl/sample_ruby.git
```
Khi remote mà có lỗi thì bạn nên remove file .git của repo sau đó git init và thực hiện remote lại.

Note: Cách thức như trên bạn có thể config cho nhiều account trên git  cũng được . Và có thể sử dụng tương tự cho gitlab.com.

Cấu hình ssh key nhiều tài khoản github trên cùng một máy tính

# Giới thiệu
Tối ưu hoá re-render cũng là việc tối ưu hoá hiệu suất ứng dụng ([performance optimization](https://reactjs.org/docs/optimizing-performance.html)). Hôm nay mình sẽ giới thiệu cho các bạn về React.memo và useMemo


## React.memo
Class components có thể ngăn chặn việc render khi props được truyền vào là giống nhau bằng cách sử dụng PureComponent hoặc shouldComponentUpdate. Bây giờ bạn cũng có thể làm điều này tương tự với function components bằng cách gói chúng trong React.memo.

Nếu function component của bạn render cùng một kết quả được cung cấp cùng một props. Bạn có thể gói nó trong React.memo để giúp tăng hiệu suất trong một số trường hợp bằng cách ghi nhớ kết quả. Điều này có nghĩa là React sẽ bỏ qua việc render component và sử dụng lại kết quả được render cuối cùng.
```js
import React from 'react';

const ItemUser = props => {
  return (
    <div>
      <p>userName: {props.username}</p>
      <span>age: {props.age}</span>
    </div>
  );
}

export default React.memo(ItemUser); 
// chỉ re-render khi props thay đổi
```
Theo mặc định, React.memo sẽ chỉ làm shallowly compare đối với các object phức tạp trong props object. Nếu bạn muốn kiểm soát việc compare, bạn cũng có thể cung cấp một custom comparison function ở đối số thứ hai của React.memo

Dưới đây mình sẽ kiểm tra xem tuổi truyền vào có lớn hơn tuổi hiện tại thì sẽ cho funtion component render lại. Nhưng ItemUser sẽ render lại khi compareProps trả về false và không render khi compareProps trả về true. Ngược lại với cách hoạt động của [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). Nên trong function compareProps mình sẽ kiểm tra ngược lại để có được kết quả mong muốn và gắn compareProps vào đối số thứ 2 của React.memo

```js
import React from "react";

const compareProps = (prevProps, nextProps) => {
  return nextProps.age <= prevProps.age;
};

const ItemUser = props => {
  return (
    <div>
      <p>userName: {props.username}</p>
      <span>age: {props.age}</span>
    </div>
  );
};

export default React.memo(ItemUser, compareProps);

```
React.memo là một [higher order component](https://reactjs.org/docs/higher-order-components.html). Nó tương tự như React.PureComponent nhưng dành cho function components thay vì là class. Và nó cực kì hữu dụng khi mới đây React ra mắt HOOKS ở phiên bản 16.8
## useMemo ( Hooks API )
<blockquote>
Hooks chính thức được giới thiệu trong phiên bản React 16.8. Nó cho phép chúng ta sử dụng state và các tính năng khác của React mà không phải dùng đến Class.
</blockquote>

Khá giống với React.memo, useMemo giúp ta kiểm soát việc được render dư thừa của các component con, chỉ khác là nó nằm trong Hook. Bằng cách truyền vào 1 tham số thứ 2 thì chỉ khi tham số này thay đổi thì thằng useMemo mới được thực thi. Ví dụ:

```js
const Users = (props) => {
  const showUsers = data => {
    return data.map((item, index) => {
      return <ItemUser 
        key={index} 
        username={item.userName} 
        age={item.age} 
      />;
    });
  };

  const checkDataUser = useMemo(() => showUsers(props.dataUser), [props.dataUser]);

  return <div className="App">
    {checkDataUser}
  </div>;
}

export default Users;

```

Trên đây function component User đảm nhiệm việc hiển thị một danh sách users. Trong này hàm checkDataUser sẽ sử dụng userMemo để kiểm tra dataUser truyền vào có thay đổi hay không để xác định có nên chạy lại funtion showUsers hay không. Như thế nó khá giống với ví dụ cho React.memo ở trên phải không nào.

Tóm cái váy lại, chúng ta đã tìm hiểu xong tối ưu việc tối ưu hoá hiệu suất ứng dụng bằng React.memo và useMemo. Còn ngại gì nữa triển khai nó vào dự án nào =))

Tối ưu hoá việc re-render với React.memo và useMemo

# Tại sao phải dùng lazy loading
Cụ thể là tôi đang nói về images. Hình ảnh có thể tiêu tốn rất nhiều băng thông (con số này lên tới 70% đối với một số website). Bạn phải trả phí để gửi chúng đi, đồng thời người dùng của bạn cũng bị tính phí để xem chúng. Trên thực tế, cả bạn và người dùng đều phải trả tiền cho cả những hình ảnh không bao giờ được nhìn thấy, bởi vì khách truy cập nhiều khi còn không bao giờ cuộn xuống đủ xa để xem chúng.

Hình ảnh không chỉ ảnh hưởng đến hiệu suất thực tế của website mà còn ảnh hưởng đến cả hiệu suất trực quan nữa. Hiệu suất trực quan (perceived performance) tạo cho website "cảm giác" nhanh hơn ngay cả khi website đó đã đang load với tốc độ rất nhanh rồi. 
<br />![Image](https://i.imgur.com/lvTkDyt.png)

# Giải pháp
Về cơ bản, phương pháp Lazy Loading Image gồm các bước sau:

* Sử dụng ảnh đơn sắc, hoặc ảnh đã làm mờ đóng vai trò là place holder (giữ chỗ). Vì những ảnh này có kích thước rất nhỏ (cỡ 200 byte là đủ) nên sẽ được load rất nhanh. Do đó, giao diện chương trình sẽ không bị vỡ.
* Kiểm tra các phần tử DOM liên quan đến hình ảnh xem nó có ở trên viewport (phạm vi màn hình) hay không. Nếu có thì sẽ load ảnh gốc một cách bất đồng bộ. Sau khi load ảnh xong thì mới set lại ảnh gốc đó cho phần tử DOM.
* Trong quá trình scroll màn hình, thực hiện lại Bước 2 cho đến khi tất cả các ảnh gốc được load hết thì thôi.


# CODE

Nghe cũng EZ nhỡ. Giờ thì mình đi vào code nào.


## Component LazyImage
```js
import React from "react";

function elementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight)
  );
}

export default class LazyImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false
    };
    this.handleScroll = this.handleScroll.bind(this);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  handleImageLoaded = () => {
    this.handleScroll();
    window.addEventListener("scroll", this.handleScroll);
  };

  handleImageErrored = () => {
    console.log("error load image");
  };

  handleScroll() {
    if (!this.state.loaded && elementInViewport(this.imgElm)) {
      // Load real image
      const imgLoader = new Image();
      imgLoader.src = this.props.src;
      imgLoader.onload = () => {
        const ratioWH = imgLoader.width / imgLoader.height;

        this.imgElm.setAttribute(`src`, `${this.props.src}`);

        this.props.keepRatio &&
          this.imgElm.setAttribute(`height`, (this.props.width / ratioWH).toString());

        this.imgElm.classList.add(`${this.props.effect}`);

        this.setState({
          loaded: true
        });
      };
    }
  }

  render() {
    const width = this.props.width || "100%";
    const height = this.props.height || "100%";
    return (
      <img
        src={this.props.placeHolder}
        width={width}
        height={height}
        ref={imgElm => (this.imgElm = imgElm)}
        className="lazy-image"
        onLoad={this.handleImageLoaded}
        onError={this.handleImageErrored}
        alt={this.props.alt}
      />
    );
  }
}

```

## CSS

Một tí transition cho nó đỡ tức mắt :)
```js
.lazy-image {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  -webkit-transition: opacity 0.1s ease-in-out;
  -moz-transition: opacity 0.1s ease-in-out;
}

.lazy-image.opacity {
  opacity: 1;
}
```

## Các data cần thiết

``` js
      <LazyImage
          placeHolder={item}
          src="https://miro.medium.com/max/1400/1*K0a7xINk0RM5gfXGSN68cw.png"
          width={"100%"}
          height={"auto"}
          effect={"opacity"}
          alt={"test lazy image"}
          keepRatio={true}
       />
```
# Giải thích cách mà Component hoạt động
## Hàm khởi tạo
Khởi tạo biến state loaded. Biến này dùng để lưu trạng thái ảnh đã được load ảnh gốc hay chưa. Ban đầu ảnh chưa được load nên giá trị này là false.

```js
this.state = {
  loaded: false
}
```

## Render

Nếu người dùng không truyền css width và height vào thì mặc định nó là '100%' hoặc bạn có thể dùng defaultProps để định nghĩa giá trị của 2 biến đó.
* Ta nhận được 1 ảnh mặc định ban đầu của nó this.props.placeHolder ( tức là 1 cái ảnh nhẹ màu trắng hiển thị ban đầu mà ta đã nói ở trên).
* onLoad sẽ thực thi khi ảnh load xong để bắt đầu lắng nghe event scroll.
* onError sẽ thực thi khi ảnh load bị lỗi.
```js
  render() {
    const width = this.props.width || "100%";
    const height = this.props.height || "100%";
    return (
      <img
        src={this.props.placeHolder}
        width={width}
        height={height}
        ref={imgElm => (this.imgElm = imgElm)}
        className="lazy-image"
        onLoad={this.handleImageLoaded}
        onError={this.handleImageErrored}
        alt={this.props.alt}
      />
    );
  }
```
## Phần xử lý chính
Sau khi ảnh placeHolder load xong thì sẽ thực thi function handleImageLoaded trong này cho hàm this.handleScroll(); chạy để bắt những cái ảnh hiện đang nằm trong viewport khi chưa scroll. Lệnh tiếp theo là lắng nghe sự kiện scroll của window.

```js
  handleImageLoaded = () => {
    this.handleScroll();
    window.addEventListener("scroll", this.handleScroll);
  };
```
```js
function elementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight)
  );
}
```

Trong function handleScroll ta thực hiện các bước sau:
* Kiểm tra ảnh này đã được load ảnh gốc chưa và có thuộc trong viewport hay không.
* Nếu đúng, đầu tiên ta khởi tạo 1 biến imgLoader.
* Gán đường dẩn ảnh gốc vào.
* Bắt sự kiện onLoad của img.
* Tính tỉ lệ chiều rộng / chiều cao của ảnh thực tế const ratioWH = imgLoader.width / imgLoader.height. Mục đích là để điều chỉnh lại tỉ lệ chiều rộng / chiều cao nếu cần thiết.
* Gán src với đường dẫn ảnh gốc cần tải.
* Nếu người dùng muốn giữ nguyên tỉ lệ ảnh gốc thì mình sẽ điều chỉnh lại chiều cao của ảnh ( thông qua biến keepRatio ).
* Về cơ bản, khi đến bước này thì ảnh đã sẵn sàng để hiển thị. Nhưng người dùng vẫn chưa nhìn thấy ảnh, vì opacity: 0. Do đó, mình sẽ thêm vào thuộc tính class của ảnh giá trị this.props.effect. Mặc định, mình mới định nghĩa 1 effect là opacity (xem lại phần css ở trên nha).
* Và cuối cùng setState loaded = true. Để chỉ load ảnh gốc 1 lần duy nhất.

```js
handleScroll() {
    if (!this.state.loaded && elementInViewport(this.imgElm)) {
      // Load real image
      const imgLoader = new Image();
      imgLoader.src = this.props.src;
      imgLoader.onload = () => {
        const ratioWH = imgLoader.width / imgLoader.height;

        this.imgElm.setAttribute(`src`, `${this.props.src}`);

        this.props.keepRatio &&
          this.imgElm.setAttribute(`height`, (this.props.width / ratioWH).toString());

        this.imgElm.classList.add(`${this.props.effect}`);

        this.setState({
          loaded: true
        });
      };
    }
  }
```

