Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(middleware/jsx): Introduce memo. #309

Merged
merged 2 commits into from
Jun 10, 2022

Conversation

usualoma
Copy link
Member

This PR provide a memo that can be used in much the same way as React.memo.

I think the React.memo is "do not recalculate the Virtual DOM unless there are changes in the props".
There is no Virtual DOM in hono's jsx engine, but I think we can give a meaning to memo that says "return a calculated EscapedString if there are no changes in props".

This can be used to avoid recalculating the following JSX on every render
https://github.com/yusukebe/iekei/blob/nano-jsx/src/components/footer.tsx

@usualoma usualoma mentioned this pull request Jun 10, 2022
@yusukebe
Copy link
Member

yusukebe commented Jun 10, 2022

Hi @usualoma !

I think it is a very nice feature because it can increase performance without complex code changes. I love it.

I've tried to use memo in this PR with my small application including the below component.

export const Footer = memo(() => {
  return (
    <footer>
      <address>
        powered by <a href='https://github.com/honojs/hono'>Hono</a>
      </address>
    </footer>
  )
})

It got faster.

Before:

スクリーンショット 2022-06-10 12 49 34

After:

スクリーンショット 2022-06-10 12 49 16

Let's go with it.

@usualoma
Copy link
Member Author

🎉
I don't intend to add anything to this PR, so please merge if you like.
I think shallowEqual can be improved in some edge cases, but I think it is mostly OK, so I think it is fine for now.

@yusukebe yusukebe merged commit 9ae8f72 into honojs:feat/jsx Jun 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants