We have learned how to use our providers in the previous lessons, we have seen how to use from the basic to the more comple provider, now we are going to see ref.select, that will help us optimizing how we deal with our providers.

Ref.select it's a really simple and useful feature of the riverpod package, it will allow us to select a specific property to read instead of watching for changes of the entire state, in this way we can optimize the way we deal with our providers, speed, and also this will allow our applications to work more fludly and be more interactive

Let's see how we can use it, if you prefer the video version here it is

Using ref.select

I have create a few things that are going to help us to understand ref.select you can copy them or get them from github here.

I have manly created a Car class and a Car Provider that it is of type StateProvider that simply returns a Car instance; Let's check out the code.

class Car {
  final String name;
  final String model;
  final Color color;

  Car({
    required this.name,
    required this.model,
    this.color = Colors.grey,
  });
}

final carProvider = StateProvider<Car>(
  (ref) => Car(
    name: 'bmw',
    model: 'QTb',
  ),
);

Now let's suppose that when watching from changes inside our provider, we don't want to look at the changes of the entire Car object but only a property of Car, for example we want to update our changes only when the color of our car changes, how we can do that?

We can do that by using select, but it works in slightly different way compared to what we are used to until now, let me show you the code first.

...
...
Widget build(BuildContext context, WidgetRef ref) {
    Color carColor = ref.watch(carProvider.select((car) => car.color));

    return MaterialApp(
    	...
        ...

Inside our build method we use watch how we are used to, only that, this time, inside instead of passing the provider directly we use a method of our carProvider, the select method.

The select method has a required parameter the callback function that will give us back the object, in our case Car, in witch we can get our properties, in our case the color.

In this way, we are saying, from the color class we want to check changes only for the color method and not to all the object. 

Now let's create a button that we can use to see it working.

floatingActionButton: FloatingActionButton(
          onPressed: () {
            final carProviderController = ref.read(carProvider.notifier);

            carProviderController.state = Car(
              name: carProviderController.state.name,
              model: 'i93223',
              color: Colors.blue,
            );
          },
          child: const Icon(Icons.add),
),

Now if we change the color you are going to see it change