[crud] Basic implementation

[poteto]

This PR introduces a new experimental hook useResourceEffect, which is something that we're doing some very early initial tests on.

This may likely not pan out and will be removed or modified if so. Please do not rely on it as it will break.

Stack created with Sapling. Best reviewed with ReviewStack.

• [crud] Basic implementation #31480
• -> [crud] Basic implementation #31416

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compiler-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2024 5:00pm

[react-sizebot]

The size diff is too large to display in a single comment. The GitHub action for this pull request contains an artifact called 'sizebot-message.md' with the full message.

Generated by 🚫 dangerJS against 0492b5f

[rickhanlonii]

Ditto here for the feature flag behavior

[poteto]

this one is still needed because i unconditionally change the shape of the Effect type, so we do still need this check. i could probably console.error or something if the flag is disabled and the effect kind isn't the simple one

[rickhanlonii]

Ditto no failing test

[rickhanlonii]

This only works because in the tests the App component is the root component, so there's no return fiber to the parent. We need to find a better way to do this that works through multiple layers.

[rickhanlonii]

I.e. this test fails:

    it('unmounts on deletion after skipped effect', async () => {
      
      function Wrapper(props) {
        return <App {...props} />
      }
      function App({id, username}) {
        const opts = useMemo(() => {
          return {username};
        }, [username]);
        useResourceEffect(
          () => {
            const resource = new Resource(id, opts);
            Scheduler.log(`create(${resource.id}, ${resource.opts.username})`);
            return resource;
          },
          [id],
          resource => {
            resource.update(opts);
            Scheduler.log(`update(${resource.id}, ${resource.opts.username})`);
          },
          [opts],
          resource => {
            resource.destroy();
            Scheduler.log(`destroy(${resource.id}, ${resource.opts.username})`);
          },
        );
        return <Text text={'Id: ' + id} />;
      }

      await act(async () => {
        ReactNoop.render(<Wrapper id={0} username="Sathya" />, () =>
          Scheduler.log('Sync effect'),
        );
        await waitFor(['Id: 0', 'Sync effect']);
        expect(ReactNoop).toMatchRenderedOutput(<span prop="Id: 0" />);
      });

      assertLog(['create(0, Sathya)']);

      await act(async () => {
        ReactNoop.render(<Wrapper id={0} username="Lauren" />, () =>
          Scheduler.log('Sync effect'),
        );
        await waitFor(['Id: 0', 'Sync effect']);
        expect(ReactNoop).toMatchRenderedOutput(<span prop="Id: 0" />);
      });

      assertLog(['update(0, Lauren)']);

      ReactNoop.render(null);
      await waitForAll(['destroy(0, Lauren)']);
      expect(ReactNoop).toMatchRenderedOutput(null);
    });

[rickhanlonii]

What if you return null as the resource?

[poteto]

I have a dev check here: https://github.com/facebook/react/pull/31416/files/1a95853a7ccb6e04e5b4fdc077d708d42e66cb58#diff-6718a473fd7cd45dba73de7f6bef32a6bf0699b23d853d6698abf02cca59f56bR158-R164

[poteto]

Sapling messed up my PR, opening a new one