Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Hook and React.memo Version

Open
#1 3 comments 0 reactions 1 assignee View on GitHub

@kyle-ssg is already working on this.

Since Oct 13, 2022.

Assessment

This issue has not been assessed yet.

Description

Thanks for your awesome library.
My project can't use react-navigation 5. so I cloned your source as hook version.
I don't know yet how create this with useMemo instead of React.memo.
How about this?

import React, { ReactElement } from 'react'
import { useIsFocused } from 'react-navigation-hooks'

type RendererProps = Props & {
  isFocused: boolean
}

type IRenderer = React.FC<RendererProps>

const Renderer: IRenderer = ({ children, Wrapper }) => {
  return Wrapper ? <Wrapper>{children}</Wrapper> : (children as ReactElement)
}

const MemorizedRender = React.memo(Renderer, (_, { isFocused }) => {
  return !isFocused
})

export const FocusRender: IFocusRender = ({ children, Wrapper }) => {
  const isFocused = useIsFocused()

  return (
    <MemorizedRender isFocused={isFocused} Wrapper={Wrapper}>
      {children}
    </MemorizedRender>
  )
}
Dominant language
TypeScript
Stars
13
Forks
1
PR merge metrics
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.