react-iifc

Use scoped hooks in react components.

Usage no npm install needed!

<script type="module">
  import reactIifc from 'https://cdn.skypack.dev/react-iifc';
</script>

README

React IIFC

Use scoped hooks in react components.

While components grow as app becomes more complicated, I'm always too busy to extract part of one component's state and render logic into another component. The IIFC pattern saves me a lot of time and makes state closer to where they are used. This is also especially useful when you want to use hooks in class components.

Example

class TheClassComponentFromLastCentryYoullNeverBeWillingToRefactorMuchButInWhichYouWantToUseHooks extends React.Component {
  state = { text: 'Hello' }

  render() {
    return (
      <div>
        <IIFC>
          {() => {
            const [count, add] = useCounter(); // calling `add` inscreases count by 1
            // When count increases, the class component will not rerender unnecessarily
            // as state is within the scope of IIFC

            return (
              <button onClick={() => add()}>
                {count} - {this.state.text}
                {/* Everything from this class component (e.g. state) is available within IIFC */}
              </button>
            );
          }}
        </IIFC>
      </div>
    );
  }
}

Playground

Codesandbox

Install

Available as react-iifc on npm.

$ yarn add react-iifc

More

Q: The source code is too simple. Is this a joke?

A: No. :|

Q: What does IIFC mean?

A: IIFC = Instantly Invoked Function Component. What IIFC is to component is like what IIFE to functions.