Is it possible make function component without useState?

Question

All my variables in the component are depending on the variable passed in params.

Why should I create state for all of them? I would just create variable with let, like:

  let isTiketAdmin: string | null = null;
  let jwt: string | null = null;
  let organizationId: string | undefined = undefined;
  let organization: OrganizationOut | undefined = undefined;

and load in value in a method:

const load = () => {
    isTiketAdmin = localStorage.getItem("isTiketAdmin");
    jwt = localStorage.getItem("jwt");
    userFbId = localStorage.getItem("userFbId");
    const organizationList = JSON.parse(
      localStorage.getItem("organizationList") ?? "[]"
    );
    organizationId = getOrganizationFbIdFromEventId(eventId);
    let organization: OrganizationOut | undefined;
    if (organizationId) {
      organization = organizationList[organizationId];
      let event = organization!.events[props.eventId];

And when something needs to be saved/changed, call load().

But then how will rendering work? Do you have any good suggestion to rerender without calling setState?

Do you need to persist the values between renders? If so, why are you avoiding using state? — Brian Thompson, Aug 06 '21 at 17:37
Why should I store, if anyway I can fetch them? state variables will cause extra renders only. — János, Aug 07 '21 at 11:37

score 1 · Accepted Answer · answered Aug 06 '21 at 17:39

You can force re-renders:

Class components: https://reactjs.org/docs/react-component.html#forceupdate
Hooks: React - How to force a function component to render? (The hooks solution would need a state but that can be extracted out to a separate custom hook)

Is it possible make function component without useState?

1 Answers1