Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

staged-components

1.0.0 • Public • Published

Staged Components

Make React function component staged.

Install

yarn add staged-components
# or 
npm install --save staged-components

Usages

React Hook is awesome, but it has some kind of rules. One of these rules is "Only Call Hooks at the Top Level".

So the component below will cause an error:

const App = function(props) {
  if (props.user === undefined) return null
  const [name, setName] = useState(props.user.name)
  // React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return
  return (
    <input value={name} onChange={(e) => {setName(e.target.value)}}/>
  )
}

With staged-components, you can safely "break" this rule:

const App = staged((props) => { // stage 1
  if (props.user === undefined) return null
  return () => { // stage 2
    const [name, setName] = useState(props.user.name)
    return (
      <input value={name} onChange={(e) => {setName(e.target.value)}}/>
    )
  }
})

Keywords

Install

npm i staged-components

DownloadsWeekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

4.01 kB

Total Files

6

Last publish

Collaborators

  • avatar