Neal's Blog https://nealbuerger.com Sun, 02 May 2021 11:46:28 +0000 en-US hourly 1 https://wordpress.org/?v=5.8.1 155939877 Interview – React Optimization Question https://nealbuerger.com/2021/05/01/interview-react-optimization-question/ Sat, 01 May 2021 20:34:32 +0000 https://nealbuerger.com/?p=276 Recently I ran into an interesting problem in a live coding session. The interviewer found a problem with my code and asked me to improve the code. Take a look at the following code. What do you think can be optimized?

const HeadLine: React.FC<{ text: string }> = ({text}) => <h1>{text}</h1>;
const TextBlock: React.FC<{ text: string }> = ({text}) => <p>{text}</p>;

export interface Item {
  type: "Headline" | "Block";
  text: string;
}

export const RenderBlock: React.FC<{ block: Item }> = ({ block }) => {
  const { text, type } = block;
  const RenderMap = {
    Headline: () => <HeadLine text={text} />,
    Block: () => <TextBlock text={text} />,
  };

  return RenderMap[type]();
};

Solution

When you use the RenderBlock component, the constant RenderMap is going to be recreated every time the component is used. You can extract the constant and put it into a higher scope to solve that problem.

The optimized code would look like this:

const HeadLine: React.FC<{ text: string }> = ({text}) => <h1>{text}</h1>;
const TextBlock: React.FC<{ text: string }> = ({text}) => <p>{text}</p>;

export interface Item {
  type: "Headline" | "Block";
  text: string;
}

const RenderMap = {
    Headline: (text:string) => <HeadLine text={text} />,
    Block: (text:string) => <TextBlock text={text} />,
  };

export const RenderBlock: React.FC<{ block: Item }> = ({ block }) => {
    const { text, type } = block;
    return RenderMap[type](text);
  };

How much did we improve the code?

If we benchmark a similar piece of code with js.bench we can see a 15% performance improvement. Technically we can see a real-world improvement. More operations can be done in the same amount of time (390000ops vs 400000ops)

The downside is that the code is harder to read (it is not reading a single block but jumping up and down in the code) and harder to extend (if parameters change for example).

In a real-world environment, you probably will have a maximum of 100 instances of this component. By optimizing the code we probably will save only a couple of microseconds.

I would argue that this is a case of premature optimization. It will not have any noticeable benefit for the end-user, while at the same time make the developer experience worse. This is an issue that would be needed to be discussed with the team to further define the style of how the code is written in the codebase.

In the end, this is a coding interview, so there is no real debate. The interviewer is expecting a certain solution. Even if your solution is correct, it might not be correct because you did not match the values and expectations of the interviewer. – I probably should have answered: “Not everything that can be optimized should be optimized.”

]]> 276