Before we move on to keyboard handling, let's refactor our Editor implementation a bit so that we can use React Hooks. We need do so this so that we can simplify how the code is handled significantly during load and save operations.

React Hooks is a relatively new feature, and if you have a background in React development, then you may have already heard of it or even used it.

The most essential hook is the useState one. You are going to use it a lot in your projects. Let's import and use the useState hook so that we can provide a pair of getters and setters for the code text:

1. Import the useState hook from the react namespace:

import React, { useState } from 'react';

2. Replace the code variable initializer with the useState hook:

// let code = '# hello world';
const [code, setCode] = useState('# hello world');

3. Finally, update the onChange handler in order to set the code value according to the Monaco Editor's state:

const onChange = newValue => {
    console.log('onChange', newValue);
    setCode(newValue);
};

Now that we know how to set up and use React Hooks, we are ready to implement keyboard support.