react-lambda-component v1.0.2

React Lambda Component

An in-place component declaration function

Why

Sometimes, a component has to use a hook conditionally. But, it is too much to declare a separate component function just to do that. Instead, it is better to declare that function in-place.

How to use

This code:

function App() {
    return <div>
        <FragmentOne />
        <FragmentTwo />
        {[3, 4, 5].map(n => (
            <FragmentMany key={n} n={n} />
        ))}
    </div>
}

function FragmentOne() {
    return <p>{useFirstHook()}</p>
}

function FragmentTwo() {
    return <p>{useSecondHook()}</p>
}

function FragmentMany({n}) {
    return <p>{useManyHook(n)}</p>
}

Can be replaced with:

function App() {
    return <div>
        {C(_ => <p>{useFirstHook()}</p>)}
        {C(_ => <p>{useSecondHook()}</p>)}
        {[3, 4, 5].map(n => (
            C(n, _ => <p>{useManyHook(n)}</p>)
        ))}
    </div>
}

As you noticed, the function just moved in the place where it is needed.

function MyFunction() {
    return <p>Lorem ipsum</p>
}

const element = <MyFunction />

Just became:

const element = C(_ => <p>Lorem ipsum</p>)