►
Description
This 11-minute demo delivered by Vardhaman Deshpande and Garry Trinder for coding developers shows two different approaches for how components in an application can find and share data. The presenters’ step-through indirect (class component) and direct (functional component), hooks approaches that deliver the same end result. If you're comfortable creating react components, then you will appreciate how direct React hooks increase your efficiency. If you are new to React hooks, watch this demo and compare the approaches. Regardless of your preference, SharePoint Framework (SPFx) supports both implementations. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded March 27, 2020.
Presenters:
• Vardhaman Deshpande (Valo) | @vrdmn
• Garry Trinder (CPS) | @garrytrinder
Supporting materials:
• SPFx: Using React hooks to globally share service scope between components | https://www.vrdmn.com/2020/02/spfx-using-react-hooks-to-globally.html
• SPFx Service scopes hooks | https://github.com/garrytrinder/spfx-servicescopes-hooks
All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2
Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
A
So
before
we
talk
about
SharePoint
framework
service
scope,
let
me
just
kind
of
set
some
context
of
the
web
part
which
we
are
going
to
see.
So
this
is
a
typical
akshar
web
part
which
I
was
playing
around
initially
when
I
was
discovering
service
copes.
So,
as
you
can
see,
it
checks
the
current
user.
It
gets
their
manager
from
the
user
profile
service
and
then
it
gets
the
reports
from
the
user
profile
service
as
well,
so
forgetting
that
we
obviously
need
to
talk
to
the
user
profile
service.
A
Rest
API
and
the
way
we
could
do
it
is
is
by
straightaway
using
the
SP
HTTP
client,
which
is
available
in
the
SP
FX
context,
or
if
we
don't
want
to
pass
around
the
context,
maybe
to
your
components
or
maybe
if
the
components
are
deeply
nested
within
your
react
tree,
what
you
can
do
is
pass
in
just
a
service
scope.
Now
the
one
good
thing
which
passing
in
the
service
scope
does
for
us
is,
it
allows
us
to
make
our
components
easily
testable.
So
this
is
my
component
and
using
the
service
scope.
A
I
can
register
either
the
correct
implementation
of
the
user
profile
service.
This
is
the
custom
service
or
I
can
register
a
mock
implementation.
So
if
we
are
testing
our
code
and
we
want
to
return
mock
data
depending
on
where
the
web
part
is
running,
so
in
this
case,
if
the
part
is
running
in
the
context
of
SharePoint
or
as
a
classic
web
part,
we
are
fetching
real
data
from
SharePoint,
whereas
if
it's
not
running
there
using
the
service
scope,
we
are
fetching
the
data
from
the
mock
User,
Profile
Service,
which
just
returns
Jason
blocks
blobs.
A
So
using
service
copes,
we
can
register
register
our
services
on
the
service
scope,
which
is
so
the
service
scope
stepping
back
a
bit.
So
a
scope
is
a
the
SPF
X
implementation
of
the
service
locator
pattern
where
you
register
services
on
it
and
you
can
consume
the
services
on
it
and
as
far
as
I
know,
the
SharePoint
framework
itself
also
uses
the
same
kind
of
model
for
registering
the
ad
HTTP
client
or
ms
graph
client.
So
on.
So
we
are
just
using
the
same
kind
of
model
to
register
our
custom
third-party
services
as
well.
A
If
I
go
and
user
profile
service,
you
can
see
here
that
the
context
is
not
being
passed
passed
in
and
when
you
register
the
service,
when
you
try
to
consume
a
service
using
this
approach,
the
service
scope
is
automatically
passed
in
and
then
you
can
fetch
the
HTTP
client,
pH
context
and
so
on
from
it
and
directly
make
a
call
to
call
to
SharePoint.
Now
the
one
one
thing
about
this
approach
is
even
though
you're
not
passing
in
the
context.
A
You
are
still
passing
in
the
service
scope
and,
if
any
of
your
child
components
in
react,
need
that
service
cope,
you
will
have
to
pass
that
down
down
the
component
tree.
One
way
around.
That
is
by
using
the
react
context.
What
we
will
do
in
the
react
context
world
is
react
gives
us
a
basically
an
object
to
store
all
the
data
we
want,
which
is
said
globally
by
the
by
the
application.
Now
this
is
different
to
the
SharePoint
framework
context,
/
pod
context.
So
before
we
actually
go
and
see.
A
How
react
context
helps
us
here,
we'll
need
to
create
a
context,
object
in
react
where
we'll
have
the
Service,
Corps
property,
and
now
this
is
actually
a
different
web
part
where
all
we
are
doing
is
getting
the
user
scruff
users
details
from
the
Microsoft
graph
API
and
displaying
it
on
the
screen.
So
an
implementation
of
this
is
you
can
see
here.
It
is
just
displaying
the
user
name
know
the
way
we
do.
That
is
first
by
creating
the
react
context,
object,
registering
with
react
context
and
then
from
our
top
level
component
in
the
application.
A
We
just
assign
a
value
to
that
and,
as
you
can
see
this
hello
user
component,
we
are
not
passing
in
any
service
scopes
or
any
context
to
it.
Internally,
the
hello
user
object
gets
the
service
scope
from
its
properties,
and
then
it
is
able
to
call
the
Microsoft
graph
service
to
set
the
state
and
and
show
the
user.
Now.
How
is
this
possible?
A
We're
not
passing
in
anything
here
when
calling
the
component,
but
if
we
go
inside
the
component,
the
property,
the
visco
property,
is
already
filled
in
and
the
way
we
do,
that
is
with
something
called
higher-order
component
in
react,
which
is,
if
I
go
back
to
the
hello
user
component.
When
we
export
it,
we
just
wrap
it
with
the
object,
Service
scope,
I
order
component
and
it
is
think
of
it
just
like
a
function
where
you
pass
in
an
argument.
A
It
uses
the
react
hooks
to
get
the
app
context
from
from
from
react
and
then
passes
it
in
as
a
property.
Once
that
service
scope
is
infused
it
can,
it
can
be
then
used
to
fetch
all
the
details
or
all
the
services
registered
from
it
now
I
mean
it
can
be
a
bit
much
to
wrap
your
head
around.
All
of
this,
so
I
have
got
a
few
blog
posts,
which
should
kind
of
step
through
all
the
different
aspects
of
the
code
and
then
I'll
post
a
link
to
this
in
the
chat
as
well.
A
Now,
if
you
are
familiar
with,
react,
works
if
you're
familiar
with
react
context,
this
might
seem
a
bit
of
an
overkill
to
you.
It's
like.
Why
am
I
not
using
the
react
hooks
directly
and
that's
because
react
hooks
work
mainly
with
react,
functional
components
and
there
might
be
already
a
lot
of
code
out
there,
which
is
using
chef
class
class
components
in
react,
because
that
is
what
we
have
been
using
for
a
long
time
now.
This
is
an
easy
way
to
just
wrap
your
component
with
this
higher-order
component.
A
If
you
want
to
get
started
with
hooks
or
if
you
want
to
get
started
with
the
service
scope
stuff,
but
if
you're
starting
something
new
I,
think
the
recommendation
from
the
react
team
is
to
start
with
hooks
start
using
hooks.
Now
where
you
can,
and
if
that
is
your
situation,
and
the
recommendation
definitely
is
to
go
with
a
full
hooks
approach.
A
B
You
very
much
okay,
great,
so
just
show
you,
the
web
part
that
we've
got
it's
very
similar
to
what
vardaman
was
showing
it's
the
same
output.
It's
the
same
example
as
what
he's
just
shown,
I'm,
just
showing
the
person
who's
name,
calling
the
graph
and
so
to
go
through
kind
of
what
has
been
been
done
in
this
approach.
B
Is
that
I've
used
functional
components
for
the
the
web
parts
and
just
to
basically
show
you
how
the
differences
between
the
two
approaches
so
we're
still
passing
through
the
service
scope
in
as
a
property,
and
we
are
still
then
setting
the
service
scope
in
the
context
which
is
created
in
a
similar
way
and
so
we're
creating
this
context
here
and
reusing
this
in
the
web
part.
So
we
have
a
context
provider
which
is
obviously
providing
this
globally.
This
service
scope
globally
to
all
of
the
the
child
components
everywhere.
B
B
So
now
we
can
see
that
it's
it's
effectively
doing
the
same
job,
but
we're
doing
it
in
a
slightly
different
way,
and
so
we've
changed
to
a
functional
component
and
rather
than
using
the
this
step,
set
state
approach
and
we're
actually
using
the
you
state
hook.
So
we're
setting
an
initial
variable
for
storing
the
name
value
and
creating
a
function
that
we're
going
to
use
to
update
the
state
with
and
rather
than
using,
a
higher-order
component.
B
We
can
access
the
global
context
directly
and
from
in
within
this
within
this
component
by
using
the
use
context
hook
to
bring
back
our
service
scope.
And
here
we're
using
use
effect
in
replace
of
component
did
mount
so
use
effect
is
a
hook
that
allows
you
to
run
a
function.
Basically,
when
your
state
changes-
and
although
for
this
example
we're
just
passing
an
empty
array,
this
means
it's
just
going
to
run
the
first
time.
B
This
component
mounts,
which
is
useful
for
where
you
want
to
fetch
it
your
data
and
so
we're
creating
a
graphic
client
factory
by
using
the
service
scope.
And
then
we
call
the
circuit.
We
create
a
client
and
then
call
the
me
endpoints
or
return
the
current
users
name
and
then
use
the
set
name
function
and
to
update
the
state
of
that
base.
That
then
in
here
this
is
where
our
component
actually
renders
again.
B
B
Now
it
reduces
a
lot
of
the
boilerplate
and
if
you
are
starting
to
create
react,
components
and
then
definitely
I
think
going
through
the
hooks
approaches
is
the
place
to
to
start,
and
so
this
code
is
available
as
a
sample
and
I
actually
pushed
the
pr
last
night
after
phaser
called
me
out
on
it
on
PAP
weekly,
because
I
didn't
put
it
forward
as
a
as
a
sample.
So
hopefully
it
will
be
available
for
you
to
to
look
at
in
the
samples
very
soon
yeah.
C
There
thanks
very
much
That's
Gary,
thanks
for
coming
really
really
powerful
stuff,
really
really
great
stuff,
and
this
is
exactly
the
stuff
which
we
definitely
want
to
also
cover
as
the
efficient
ways
of
doing
development
in
the
course,
but
then,
at
the
same
time,
demonstrating
different
functionalities
and
samples
and
solutions
is
super
valuable.
So
thank
you.
Thank
you
for
that.