Using callbacks to achieve better component decoupling in React

Dario Djuric — Sat, 14 Sep 2024 10:24:32 +0000

Imagine you have an onboarding component that displays a WelcomeStep, TermsOfServiceStep, or CompleteStep, depending on the current step. A beginner developer might implement this as:

export type Step = 'welcome' | 'terms-of-service' | 'complete';

export default function OnboardingSection() {
  const [step, setStep] = useState<Step>('welcome');

  return (
    <Box>
      {step === 'welcome' && (
        <WelcomeStep setStep={setStep} />
      )}
      {step === 'terms-of-service' && (
        <TermsOfServiceStep setStep={setStep}  />
      )}
      {step === 'complete' && <CompleteStep />}
    </Box>
  );
}

The WelcomeStep component has a button, that, when clicked, updates the state to welcome.

export function WelcomeStep(props: { setStep: (newStep: Step) => void }) {
  return (
    <Box>
      <Box>Welcome to our platform!</Box>
      <Box>
        <Button onClick={() => setStep('terms-of-service')}>Next</Button>
      </Box>
    </Box>
  );
}

There’s nothing particularly wrong with this approach, and it will work correctly. However, we have introduced a tight coupling between the WelcomeStep component and the OnboardingSection component.

Why is this a problem?

There are several issues with this approach. First of all, this breaks the encapsulation of the parent component, as it now leaks the internal state of the component down to its children. Having setters exposed might make problems difficult to troubleshoot as you have no control over where the setters are used. A child component might update the state in ways that the parent component does not anticipate or control.

This also might lead to unnecessary re-renders, as the child is now in control of the parent's control re-rendering. When only the parent is in control of the state changes, it has more control over when the state update happens.

Finally, the child component is now a bit more difficult to test, as it always needs to be used in pair with the parent component due to high coupling between the two.

The solution

The solution is for the child component to provide a callback function to the parent. Although the flow in this example remains the same, you are now making the child component easier to test and reuse in different contexts. Having the child component expose something like onClickNext means that it can easily be used in components other than OnboardingSection, making the component easier to test.

Have a look at the standard input element, for example. You don't see any setters function on that element's interface. Instead, there is a value attribute and an onChange attribute. You pass values down, and you get notified of the change upwards. This makes for a simpler interface that makes this component reusable in very different use cases.

Here's a revised version of our component:

export default function OnboardingSection() {
  const [step, setStep] = useState<Step>('welcome');

  return (
    <Box>
      {step === 'welcome' && (
        <WelcomeStep onClickNext={() => setStep('terms-of-service')} />
      )}
      {step === 'terms-of-service' && (
        <TermsOfServiceStep onClickNext={() => setStep('complete')} />
      )}
      {step === 'complete' && <CompleteStep />}
    </Box>
  );
}

We are now calling the setter in the component that owns the setter, reducing the coupling between that component and the child components. Another added benefit of this approach is that you can now have more complex logic in the onClickNext handler should you ever need it.

When designing components, always try to put some extra effort into designing their interfaces. Try to think of the components in isolation as if you don't know how or where they will be used. You'll find that you'll start designing components that are simpler and easier to use and test.

Adding Cognito user via AWS API

Dario Djuric — Thu, 12 Jan 2023 10:25:37 +0000

Cognito is a fully managed identity service provided by AWS. It allows developers to easily add user sign-up, sign-in, and access control to their applications. When it comes to user registration, users can be added through the AWS console, the AWS CLI, or the AWS API. Some services, like AWS Amplify, come with user registration out of the box with an easy to use API.

What if you wanted to add more Cognito users in a bulk? It would make sense to write a script for that, and use the AWS API. This blog post will show you how.

Start off by installing the AWS SDK.

npm install aws-sdk

Then, create a JavaScript file and import the SDK:

const aws = require('aws-sdk');

Before using the API, you need to set up your credentials. If you store your AWS credentials in the AWS config file, create a new instance of SharedIniFileCredentials:

const credentials = new AWS.SharedIniFileCredentials({ profile: 'YOUR_AWS_PROFILE' });

If you use AWS SSO, you will need to npm install @aws-sdk/credential-provider-sso and then use its fromSSO function:

const { fromSSO } = require('@aws-sdk/credential-provider-sso');
const credentials = await fromSSO({ profile: 'YOUR_AWS_PROFILE' })();

Set the credentials and the region, and create and instance of CognitoIdentityServiceProvider:

aws.config.update({
  region: 'us-east-1',
  credentials,
});

const cognito = new aws.CognitoIdentityServiceProvider({
  apiVersion: '2016-04-18',
});

Next, invoke the Cognito API to create the user, set the password, and optionally add the user to a Cognito group:

await cognito
  .adminCreateUser({
    UserPoolId: userPoolId,
    Username: email,
    UserAttributes: [
      {
        Name: 'email',
        Value: email,
      },
      {
        Name: 'email_verified',
        Value: 'true',
      },
    ],
  })
  .promise();

await cognito
  .adminSetUserPassword({
    Password: password,
    UserPoolId: userPoolId,
    Username: email,
    Permanent: true,
  })
  .promise();

if (groupName) {
  await cognito
    .adminAddUserToGroup({
      GroupName: groupName,
      UserPoolId: userPoolId,
      Username: email,
    })
    .promise();
}

That's it. You can wrap the above code into its own function, especially if you want to create many users in bulk. See this GitHub gist for the entire code.

DEV Community: Dario Djuric

Using callbacks to achieve better component decoupling in React

Why is this a problem?

The solution

Adding Cognito user via AWS API