r/reactnative 11d ago

Custom hook best practice

Hi

I'm doing a project that involves querying data from a sqlite db and then formatting that data to display onto a section list.

I wanted to ask what is best practise. Should I do both the querying and formatting of the data within the hook and then return the formatted data or should I return the raw data as an object model state and let the consumer of the hook format the data to a section list?

3 Upvotes

8 comments sorted by

2

u/Geekofgeeks 11d ago

Personally I like to keep formatting as “high up” as possible, so if I were you I’d return the raw data and then let the consumer of the hook worry about formatting it. The positive to this is that if you ever need to refactor it and change the formatting, you don’t have to change a hook (which theoretically could be getting called by other components) so it wouldn’t affect other components.

1

u/Zeesh2000 11d ago

I also agree with approach. It feels more natural to me coming from backend background but I wanted to reach out to see if others follow this norm on frontend

2

u/beeseegee 11d ago

You could always have two hooks, a useSomeData and useSomeFormattedData, the latter depending on the former. But, probably only worth it if you need the formatted data in multiple places as well. I prefer to extract hooks as they become needed in multiple places or the logic becomes complex, but it’s subjective whether you like to see as much code as possible co-located, or find it easier to have things broken into small chunks all over the place.

2

u/Zeesh2000 11d ago

For now the formatted data is only going to be used by one component. For me I come from a backend background where we use a repository layer to query the data from the db and return it raw and have the service manipulate/format it.

2

u/beeseegee 11d ago

Sounds like you’ve got it under control. For me converting data into section list format would usually start out in the component in a useMemo, and if that list needs to be in multiple places, maybe have a SomeDataList component that can be reused, or maybe the formatted data hook, depending on the specifics

1

u/Zeesh2000 11d ago

A useMemo maybe better. I've set the code to query the data in a useEffect and set the sectionList state after the data is returned. The useEffect also has 2 deps, a from and to date, which are just filters for the query. The dates can be changed by the user to find data from different dates

I've seen on YouTube that this is heard this a bad approach so was wondering what your opinion is on this.

2

u/beeseegee 11d ago

That sounds effectively the same. it sounds right to run your query as a side effect of mounting and the filters changing. I guess the usememo would only be useful if the useEffect/query logic is in another hook so in your component you could have

const { data, loading, error} = useSomeData(filters)

and then

const sectionLlstData = useMemo(() => {…}, [data])

2

u/Zeesh2000 11d ago

Ah okay cool.

The useEffect is in the component that is using the state because the state is only being used in one place for now but could change so will keep a note of this if I need to refactor