Ensure state is selected after function to create portion of state is called

[lkdm]

I'm working on a Field component that creates its own reference in state when it first gets loaded.

const StatefulField = ({...props}) => {
    useEffect(() => {
        createField(props.identifier, props.defaultValue)
    }, [])
    
    
    //
    // Selects the portion of state related to this field. The component will only
    // re-render if the exact attribute specified changes. In this case, it's `error`.
    //
    const {error} = useStore(
        useCallback(
            (state: any) => ({
                // If you see an error here, it may be due to Zustand failing to setup the store.
                error: state.fields.get(props.identifier).error
            }) 
            , [props.identifier]
            )
        )
    
    
    return (
        <div id={props.identifier} className='field'>
            <InputField id={props.id} {...props} />
            {error && String(error)}
        </div>
    )
}

This throws an error TypeError: state.fields.get(...) is undefined, which means the createField() method executed after the store was selected.

If I move useStore into the useEffect hook, it obviously doesn't work because the JSX relies on error.

How do I ensure that this happens in the correct order?

[dai-shi]

You can't change the order, but you can expect that first render is undefined, and handles the undefined issue.

[lkdm]

Thank you for your reply @dai-shi. The issue is that the state.fields.get() method throws the error because the part of store doesn't exist. It has nothing to do with the JSX portion.

After your reply, I also tried abstracting the selector into a function that creates the portion of store if it doesn't exist, however this creates a new bug (Object is possibly 'undefined'. TS2532).

export const selectField = (_fieldId: string) => {
    const field = useStore.getState().fields.has(_fieldId)
    if (field === undefined)
        useStore.setState((state: any) => state.fields.set(_fieldId, {value: "", error: ""}))
    return useStore.getState().fields.get(_fieldId)
}

It then thinks the function could possibly return undefined.

const {error} = useStore(
        useCallback(
            (state: any) => ({
                // If you see an error here, it may be due to Zustand failing to setup the store.
                error: selectField(props.identifier).error
            }) 
            , [props.identifier]
            )
        )

I'm not sure how to solve this, to be honest.

[dai-shi]

How does your store look like?

I would do something like this:

const error = useStore((state) => state.fields[props.identifier]?.error)

You don't want to create a new object in the selector.
Also, using useCallback is optional. (the description in readme will be changed in the next version.)

[lkdm]

Thank you @dai-shi, that was the solution.

const StatefulField = ({...props}) => {
    //
    // Selects the portion of state related to this field. The component will only
    // re-render if the exact attribute specified changes. In this case, it's `error`.
    //
    const {error} = useStore((state: any) => ({
        error: state.fields.get(props.identifier)?.error
    }))
    
    return (
        <div id={props.identifier} className='field'>
            <InputField id={props.id} {...props} />
            {error && String(error)}
        </div>
    )
}

If I recall correctly, useCallback shaves a few milliseconds off response time? Probably not too important for our use case, so I've removed it. Thank you for your suggestion.

[dai-shi]

Yes, using useCallback can optimize something: when it re-renders with the same prop value it will skip evaluating the selector function, which is too trivial in your case.
In terms of performance, creating an object in the selector is far from ideal. you want to just return the error value.

[lkdm]

Thank you, @dai-shi. This is what I ended up with; and it works a treat!

const StatefulField = ({...props}) => {
    //
    // Selects the portion of state related to this field. The component will only
    // re-render if the exact attribute specified changes. In this case, it's `error`.
    //
    const error = useStore((state: any) => state.fields.get(props.identifier)?.error)

    //
    // Check validation flags for "required" attribute, and use it to mark
    // the field as "required".
    //
    const validateField: Boolean = Boolean(props.validation)
    const fieldIsRequired: Boolean = validateField && (props.validation.some((e: { name: string }) => e.name === "required"))

    //
    // Create Field in store asyncronously, upon first render.
    //
    React.useEffect(() => {
        setField(props.identifier, props.defaultValue, "")
    }, [])

    return (
        <div id={props.identifier} className='field'>
            {fieldIsRequired
                ? <GenericField id={props.id} {...props} required="required"/>
                : <GenericField id={props.id} {...props} />
            }
            {error && String(error)}
        </div>
    )
}